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

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

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

html如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Css Paint</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

     <div class="sun">

         <div class="sun-body"></div>

         <div class="sun-shine-light sun-shine-light1"></div>

         <div class="sun-shine-light sun-shine-light2"></div>

         <div class="sun-shine-light sun-shine-light3"></div>

         <div class="sun-shine-light sun-shine-light4"></div>

         <div class="sun-shine-light sun-shine-light5"></div>

     </div>

 </body>

 </html>

css如下：

 .sun{

     position: relative;

 }

 .sun-body{

     background-color: red;

     border-radius: 50%;

     height: 300px;

     left: -100px;

     position: absolute;

     top: -100px;

     width: 300px;

     z-index:;

 }

 .sun-shine-light{

     background-color: yellow;

     height: 5px;

     left:250px;

     margin-top:30px;

     position: relative;

     width: 300px;

     z-index:;

 }

 .sun-shine-light1{

     -webkit-transform: rotate(-3deg);

     -moz-webkit-transform: rotate(-3deg);

     -ms-webkit-transform: rotate(-3deg);

     -o-webkit-transform: rotate(-3deg);

 }

 .sun-shine-light2{

     top: 70px;

     left: 240px;

     -webkit-transform: rotate(10deg);

     -moz-webkit-transform: rotate(10deg);

     -ms-webkit-transform: rotate(10deg);

     -o-webkit-transform: rotate(10deg);

 }

 .sun-shine-light3{

     top: 160px;

     left: 195px;

     -webkit-transform: rotate(30deg);

     -ms-transform: rotate(30deg);

     -o-transform: rotate(30deg);

     transform: rotate(30deg);

 }

 .sun-shine-light4{

     top: 215px;

     left: 85px;

     width: 260px;

     -webkit-transform: rotate(55deg);

     -ms-transform: rotate(55deg);

     -o-transform: rotate(55deg);

     transform: rotate(55deg);

 }

 .sun-shine-light5{

     top: 200px;

     left: -50px;

     width: 230px;

     -webkit-transform: rotate(85deg);

     -ms-transform: rotate(85deg);

     -o-transform: rotate(85deg);

     transform: rotate(85deg);

 }

依照@魔芋铃的建议， 以下是效果的链接（再次感谢）：

效果

这里用到一个比较陌生的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. js 模块化历程

    作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...

  2. html 组装table 指定列自动换行

    4列后自动换行思路:int i = 0;while (dr.Read()){    if (i % 4 == 0) 输出一行的开始     输出这个数据    if (i % 4 == 3) 输出一行 ...

  3. 检索 COM 类工厂中 CLSID 为 {28E68F9A-8D75-11D1-8DC3-3C302A000000} 的组件失败，原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    Resvr32 .net中引用控件的名称 如果注册成功,问题不在出现 但是如果是在x64位的系统中,即使控件注册成功,错误依照提示,是因为大多数第三方写的COM控件,只支持32位的系统, 在VS中找到 ...

  4. Win10 QQ五笔默认中文，InputMode默认中文

    Win10系统安装了QQ五笔后,InputMode默认英文,必须用鼠标点或者按 Ctrl+空格才能转换为中文.非常不方便. 即使将微软拼音默认为中文也不管用,解决方法如下: 设置后,无论你打开运行.记 ...

  5. C#中考虑为大对象使用弱引用

    1.无论怎样尽力,我们总是会使用到某些需要大量内存的数据,而这些内存并不需要经常访问.或许你需要从一个大文件中查找某个特定的值,或者算法需要一个较大的查询表.这时,你也许会采用2中不太好做法:第一种是 ...

  6. spring容器加载完毕做一件事情（利用ContextRefreshedEvent事件）转

    关键字:spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) 应用场景:很多时候我们想要在某个类加载完毕时干某件事情,但是使用了spring管理对象,我们这个类引用 ...

  7. 十大Intellij IDEA快捷键

    转载:http://blog.csdn.net/dc_726/article/details/42784275 Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一 ...

  8. 使用异步存储提升 Web 应用程序的离线体验

    localForage 是一个 JavaScript 库,通过使用简单的.类似 localStorage 风格的 API 实现异步存储,帮助你提升 Web 应用程序的离线经验(通过 IndexedDB ...

  9. border-radius如何兼容IE

    目前而言firefox,opera,chrome等主流浏览器都已经支持border-radius属性,唯独IE8以及之前. 解决办法就是在用的border-radius属性的后面加上:behavior ...

  10. Javascript Object、Function对象

    1.Object对象 原型对象 原型是对象的一个属性,也就是prototype属性,每个对象都有这个内部属性,而且他本身也是一个对象. <script type="text/javas ...