几年前开始就一直想用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: 9; 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:10; 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画幅画(二)