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

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

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

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

html如下：

 1 <!DOCTYPE html>
 2 <html lang="en" 3 head 4     Meta charset="UTF-8" 5     title>Css Paint</ 6     link rel="stylesheet" type="text/css" href="css/style.css" 7  8 body 9     div class="sun"10         ="sun-body"></div11         ="sun-shine-light sun-shine-light1"12         ="sun-shine-light sun-shine-light2"13         ="sun-shine-light sun-shine-light3"14         ="sun-shine-light sun-shine-light4"15         ="sun-shine-light sun-shine-light5"16     17 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  absolute;
11     top:12     width:13     z-index: 9;
14 }
15 .sun-shine-light{
16  yellow;
17  5px;
18 250px;
19     margin-top:30px;
20 21 22 10;
23 }
24 .sun-shine-light1{
25     -webkit-transform: rotate(-3deg);
26     -moz-webkit-transform:27     -ms-webkit-transform:28     -o-webkit-transform:29 }
30 .sun-shine-light2{
31  70px;
32  240px;
33  rotate(10deg);
34 35 36 37 }
38 .sun-shine-light3{
39  160px;
40  195px;
41  rotate(30deg);
42     -ms-transform:43     -o-transform:44     transform:45 }
46 .sun-shine-light4{
47  215px;
48  85px;    
49  260px;
50  rotate(55deg);
51 52 53 54 }
55 .sun-shine-light5{
56  200px;
57  -50px;
58  230px;
59  rotate(85deg);
60 61 62 63 }

View Code

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

效果

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

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

心得：

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

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

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

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

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

猜你在找的HTML相关文章