CSS3 莲花盛开动画

See the Pen CSS3 Lotus by haiqing wang (@whqet) onCodePen.

大家先来看看效果，纯CSS3实现，为了简化问题，使用LESS和prefix free。

下面来开工，先看html

[html]  view plain copy print ?

1. <header id="header">  
2.   <hgrounp class="white blank">  
3.     <h1>CSS3制作莲花开放</h1>  
4.   </hgrounp>  
5. </header>  
6. <section class="demo">  
7.   <div class="leaf"></div>  
8.   <div class="leaf"></div>  
9.   <div class="leaf"></div>  
10.   <div class="leaf"></div>  
11.   <div class="leaf"></div>  
12.   <div class="leaf"></div>  
13.   <div class="leaf"></div>  
14.   <div class="leaf"></div>  
15.   <div class="leaf"></div>  
16.   <div class="leaf"></div>  
17. </section>  

利用div.leaf这个DIV来实现叶子。

CSS部分，Less的一些变量和Mixin，主要有opacity、animate和transform。

[css]  view plain copy print ?

1. /*定义变量*/  
2. @leafWidth:150px;  
3. @bgColor:#333;  
4. /*定义Mixins*/  
5. // OPACITY  
6. .opacity(@val){  
7.     opacity:@val;  
8.     @cent:@val*100;  
9.     filter:~"alpha(opacity=@{cent})";  
10. }  
11. // Animations  
12. .animate(@val){  
13.     -webkit-animation: @val;  
14.     -moz-animation: @val;  
15.     -o-animation: @val;  
16.     animation: @val;  
17. }  
18. // Animation Delay  
19. .animate-delay(@val){  
20.     -webkit-animation-delay: @val;  
21.     -moz-animation-delay: @val;  
22.     -o-animation-delay: @val;  
23.     animation-delay: @val;  
24. }  
25. // Transform MIXIN  
26. .transform (@val;@origin:0 0) {  
27.     -webkit-transform: @val;  
28.     -webkit-transform-origin: @origin;  
29.     -moz-transform: @val;  
30.     -moz-transform-origin: @origin;  
31.     -ms-transform: @val;  
32.     -ms-transform-origin: @origin;  
33.     -o-transform: @val;  
34.     -o-transform-origin: @origin;  
35.     transform: @val;  
36.     transform-origin: @origin;  
37. }  

然后是布局的CSS

[html]  view plain copy print ?

1. body{  
2.     background-color: @bgColor;  
3. }  
4. .demo{  
5.     width:@leafWidth*1.5;  
6.     height: @leafWidth*1.5;  
7.     margin: 300px auto 0;  
8.     position: relative;  
9.         .transform(rotate(135deg),center center);  
10.   
11.     .leaf{  
12.         width: @leafWidth;  
13.         height: @leafWidth;  
14.         border-radius: @leafWidth 0px;  
15.         background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);  
16.         .opacity(.5);  
17.         position: absolute;  
18.         margin-top: 400px;  
19.     }  
20. }  

这里，使用border-radius将矩形div变成叶子形状，利用linear-gradient实现叶子填充。

然后将叶子位置初始化

[css]  view plain copy print ?

1. @iterations:10;  
2. @degrees:360/@iterations * 1deg;  
3. // Looping generator  
4. .loop (@index) when (@index>0){  
5.     &:nth-child(@{iterations}n + @{index}){  
6.         // Create a skew which is a number of degrees from the root element  
7.         .animate-delay(@index/10 * 1s);  
8.         @rotate:@index*@degrees+180deg;  
9.         .transform(rotate(@rotate), top right);  
10.     }  
11.     .loop((@index - 1));  
12. }  

LESS循环遍历.leaf，进行位置初始化，动画延迟设置。

然后定义关键帧动画

[css]  view plain copy print ?

1. @keyframes openAnimate{  
2.     to {  
3.         .transform(rotate(360deg),top right);  
4.     }  
5. }  

在.leaf的css里，调用刚刚的遍历循环和动画。

[css]  view plain copy print ?

1. .leaf{  
2.     width: @leafWidth;  
3.     height: @leafWidth;  
4.     border-radius: @leafWidth 0px;  
5.     background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);  
6.     .opacity(.5);  
7.     position: absolute;  
8.     margin-top: 400px;  
9.                //设置动画和遍历  
10.     .animate(openAnimate 6s ease-in-out infinite alternate);  
11.     .loop(@iterations);  
12. }  

完成版的CSS如下所示。

[css]  view plain copy print ?

1. /*定义变量*/  
2. @leafWidth:150px;  
3. @bgColor:#333;  
4. /*定义Mixins*/  
5. // OPACITY  
6. .opacity(@val){  
7.     opacity:@val;  
8.     @cent:@val*100;  
9.     filter:~"alpha(opacity=@{cent})";  
10. }  
11. // Animations  
12. .animate(@val){  
13.     -webkit-animation: @val;  
14.     -moz-animation: @val;  
15.     -o-animation: @val;  
16.     animation: @val;  
17. }  
18. // Animation Delay  
19. .animate-delay(@val){  
20.     -webkit-animation-delay: @val;  
21.     -moz-animation-delay: @val;  
22.     -o-animation-delay: @val;  
23.     animation-delay: @val;  
24. }  
25. // Transform MIXIN  
26. .transform (@val;@origin:0 0) {  
27.     -webkit-transform: @val;  
28.     -webkit-transform-origin: @origin;  
29.     -moz-transform: @val;  
30.     -moz-transform-origin: @origin;  
31.     -ms-transform: @val;  
32.     -ms-transform-origin: @origin;  
33.     -o-transform: @val;  
34.     -o-transform-origin: @origin;  
35.     transform: @val;  
36.     transform-origin: @origin;  
37. }  
38. @iterations:10;  
39. @degrees:360/@iterations * 1deg;  
40. // Looping generator  
41. .loop (@index) when (@index>0){  
42.     &:nth-child(@{iterations}n + @{index}){  
43.         // Create a skew which is a number of degrees from the root element  
44.         .animate-delay(@index/10 * 1s);  
45.         @rotate:@index*@degrees+180deg;  
46.         .transform(rotate(@rotate), top right);  
47.     }  
48.     .loop((@index - 1));  
49. }  
50. @keyframes openAnimate{  
51.     to {  
52.         .transform(rotate(360deg),top right);  
53.     }  
54. }  
55. body{  
56.     background-color: @bgColor;  
57. }  
58. .demo{  
59.     width:@leafWidth*1.5;  
60.     height: @leafWidth*1.5;  
61.     margin: 300px auto 0;  
62.     position: relative;  
63.   .transform(rotate(135deg),center center);  
64.   
65.     .leaf{  
66.         width: @leafWidth;  
67.         height: @leafWidth;  
68.         border-radius: @leafWidth 0px;  
69.         background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);  
70.         .opacity(.5);  
71.         position: absolute;  
72.         margin-top: 400px;  
73.         .animate(openAnimate 6s ease-in-out infinite alternate);  
74.         .loop(@iterations);  
75.     }  
76. }