几年前开始就一直想用css画幅画。

今天才真正开始, 从简单的开始。

作为一个工作压力那么大的程序员,我首先要画一个太阳。

html如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Css Paint</title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. </head>
  8. <body>
  9. <div class="sun">
  10. <div class="sun-body"></div>
  11. <div class="sun-shine-light sun-shine-light1"></div>
  12. <div class="sun-shine-light sun-shine-light2"></div>
  13. <div class="sun-shine-light sun-shine-light3"></div>
  14. <div class="sun-shine-light sun-shine-light4"></div>
  15. <div class="sun-shine-light sun-shine-light5"></div>
  16. </div>
  17. </body>
  18. </html>

css如下:

  1. .sun{
  2. position: relative;
  3. }
  4.  
  5. .sun-body{
  6. background-color: red;
  7. border-radius: 50%;
  8. height: 300px;
  9. left: -100px;
  10. position: absolute;
  11. top: -100px;
  12. width: 300px;
  13. z-index:;
  14. }
  15. .sun-shine-light{
  16. background-color: yellow;
  17. height: 5px;
  18. left:250px;
  19. margin-top:30px;
  20. position: relative;
  21. width: 300px;
  22. z-index:;
  23. }
  24. .sun-shine-light1{
  25. -webkit-transform: rotate(-3deg);
  26. -moz-webkit-transform: rotate(-3deg);
  27. -ms-webkit-transform: rotate(-3deg);
  28. -o-webkit-transform: rotate(-3deg);
  29. }
  30. .sun-shine-light2{
  31. top: 70px;
  32. left: 240px;
  33. -webkit-transform: rotate(10deg);
  34. -moz-webkit-transform: rotate(10deg);
  35. -ms-webkit-transform: rotate(10deg);
  36. -o-webkit-transform: rotate(10deg);
  37. }
  38. .sun-shine-light3{
  39. top: 160px;
  40. left: 195px;
  41. -webkit-transform: rotate(30deg);
  42. -ms-transform: rotate(30deg);
  43. -o-transform: rotate(30deg);
  44. transform: rotate(30deg);
  45. }
  46. .sun-shine-light4{
  47. top: 215px;
  48. left: 85px;
  49. width: 260px;
  50. -webkit-transform: rotate(55deg);
  51. -ms-transform: rotate(55deg);
  52. -o-transform: rotate(55deg);
  53. transform: rotate(55deg);
  54. }
  55. .sun-shine-light5{
  56. top: 200px;
  57. left: -50px;
  58. width: 230px;
  59. -webkit-transform: rotate(85deg);
  60. -ms-transform: rotate(85deg);
  61. -o-transform: rotate(85deg);
  62. transform: rotate(85deg);
  63. }

依照@魔芋铃的建议, 以下是效果的链接(再次感谢):

效果

这里用到一个比较陌生的css属性: transform:rotate(Ndeg)

作用是旋转,其中N为整数,表示旋转的角度。旋转基于对象的重心。

心得:

当对象尺寸(长宽)改变时,旋转的重心也会跟着改变,被这个特性折腾了不少时间。

在上面的光线旋转了一定角度后,宽度看起来会变长一点。于是又修改它的width,然后相应的left、top都需要修改了(因为重心位置变了)。

今天就到这。以后继续。 谢谢观看。

下一篇: [css]我要用css画幅画(二)

[css]我要用css画幅画(一)的更多相关文章

  1. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  2. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  3. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  4. [css]我要用css画幅画(六)

    接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...

  5. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  6. [css]我要用css画幅画(四)

    接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...

  7. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  8. [css]我要用css画幅画(二)

    接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...

  9. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. 基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

    我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却 ...

  2. Nhibernate的第一个实例

    第一个NhIbernate程序 1.目的: a) 链接到oracle数据库 b) 增删改 c) 基本查询.sql查询 d) 视图查询 e) 使用存储过程 f) 多表查询.级联查询 g) 级联增删改 2 ...

  3. Android使用SAX解析XML(5)

    parse_handler.java文件: package com.hzhi.my_sax; import org.xml.sax.Attributes; import org.xml.sax.SAX ...

  4. WITH RECURSIVE and MySQL

    WITH RECURSIVE and MySQL If you have been using certain DBMSs, or reading recent versions of the SQL ...

  5. PHP内核探索之变量(7)- 不平凡的字符串

    切,一个字符串有什么好研究的. 别这么说,看过<平凡的世界>么,平凡的字符串也可以有不平凡的故事.试看: (1)       在C语言中,strlen计算字符串的时间复杂度是?PHP中呢? ...

  6. SpringMVC 邮件发送

    <!--邮件发送实现类--> <bean id="javaMailSender" class="org.springframework.mail.jav ...

  7. GJM :用JIRA管理你的项目(二)JIRA语言包支持及插件支持 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  8. IoC和DI的理解

    1 概述 当我们想闭上眼睛想如何让我们的软件更加可用可维护时,我们总能想到一个词:松耦合.在这篇文章中,主要讲述了模块间存在的依赖关系,但这种依赖关系违背了依赖倒置原则.在这之后,我们将讨论一种解除软 ...

  9. Aurelia – 模块化,简单,可测试的 JS 框架

    Aurelia 是下一代 JavaScript 客户端框架,利用简单的约定来激发你的创造力.凭借其强大的专注于开发经验, Aurelia 可以使您不仅创造惊人的应用程序,同时也享受这个过程.它经过精心 ...

  10. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...