[css]我要用css画幅画(一)

几年前开始就一直想用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>
View Code

 

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 }
View Code

 

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

效果

 

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

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

 

心得：

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

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

 

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

 

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

posted on 2015-11-03 23:31  bee0060  阅读(1182)  评论(7)  编辑  收藏  举报

导航