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