点击这里查看效果:http://keleyi.com/a/bjad/32gxxsaw.htm
或者:http://keleyi.com/keleyi/phtml/css3/10a.htm
效果图:
代码如下:
1 <!DOCTYPE html><html>
2 <head><meta charset="UTF-8">
3 <title>CSS3制作莲花开放动画-柯乐义</title>
4 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>
5 <style>/*定义变量*/
6 /*定义Mixins*/
7 @keyframes openAnimate {
8 to {
9 -webkit-transform: rotate(360deg);
10 -webkit-transform-origin: top right;
11 -moz-transform: rotate(360deg);
12 -moz-transform-origin: top right;
13 -ms-transform: rotate(360deg);
14 -ms-transform-origin: top right;
15 -o-transform: rotate(360deg);
16 -o-transform-origin: top right;
17 transform: rotate(360deg);
18 transform-origin: top right;
19 }
20 }
21 body {
22 background-color: #ccc;
23 }
24 .demo {
25 width: 225px;
26 height: 225px;
27 margin: 300px auto 0;
28 position: relative;
29 -webkit-transform: rotate(135deg);
30 -webkit-transform-origin: center center;
31 -moz-transform: rotate(135deg);
32 -moz-transform-origin: center center;
33 -ms-transform: rotate(135deg);
34 -ms-transform-origin: center center;
35 -o-transform: rotate(135deg);
36 -o-transform-origin: center center;
37 transform: rotate(135deg);
38 transform-origin: center center;
39 }
40 .demo .leaf {
41 width: 150px;
42 height: 150px;
43 border-radius: 150px 0px;
44 background: linear-gradient(45deg, #bcbec0 8%, #9e1f63 30%, #9e1f63 100%);
45 opacity: 0.6;
46 filter: alpha(opacity=60);
47 position: absolute;
48 margin-top: 400px;
49 -webkit-animation: openAnimate 6s ease-in-out infinite alternate;
50 -moz-animation: openAnimate 6s ease-in-out infinite alternate;
51 -o-animation: openAnimate 6s ease-in-out infinite alternate;
52 animation: openAnimate 6s ease-in-out infinite alternate;
53 }
54 .demo .leaf:nth-child( 10n + 10) {
55 -webkit-animation-delay: 1s;
56 -moz-animation-delay: 1s;
57 -o-animation-delay: 1s;
58 animation-delay: 1s;
59 -webkit-transform: rotate(540deg);
60 -webkit-transform-origin: top right;
61 -moz-transform: rotate(540deg);
62 -moz-transform-origin: top right;
63 -ms-transform: rotate(540deg);
64 -ms-transform-origin: top right;
65 -o-transform: rotate(540deg);
66 -o-transform-origin: top right;
67 transform: rotate(540deg);
68 transform-origin: top right;
69 }
70 .demo .leaf:nth-child( 10n + 9) {
71 -webkit-animation-delay: 0.9s;
72 -moz-animation-delay: 0.9s;
73 -o-animation-delay: 0.9s;
74 animation-delay: 0.9s;
75 -webkit-transform: rotate(504deg);
76 -webkit-transform-origin: top right;
77 -moz-transform: rotate(504deg);
78 -moz-transform-origin: top right;
79 -ms-transform: rotate(504deg);
80 -ms-transform-origin: top right;
81 -o-transform: rotate(504deg);
82 -o-transform-origin: top right;
83 transform: rotate(504deg);
84 transform-origin: top right;
85 }
86 .demo .leaf:nth-child( 10n + 8) {
87 -webkit-animation-delay: 0.8s;
88 -moz-animation-delay: 0.8s;
89 -o-animation-delay: 0.8s;
90 animation-delay: 0.8s;
91 -webkit-transform: rotate(468deg);
92 -webkit-transform-origin: top right;
93 -moz-transform: rotate(468deg);
94 -moz-transform-origin: top right;
95 -ms-transform: rotate(468deg);
96 -ms-transform-origin: top right;
97 -o-transform: rotate(468deg);
98 -o-transform-origin: top right;
99 transform: rotate(468deg);
100 transform-origin: top right;
101 }
102 .demo .leaf:nth-child( 10n + 7) {
103 -webkit-animation-delay: 0.7s;
104 -moz-animation-delay: 0.7s;
105 -o-animation-delay: 0.7s;
106 animation-delay: 0.7s;
107 -webkit-transform: rotate(432deg);
108 -webkit-transform-origin: top right;
109 -moz-transform: rotate(432deg);
110 -moz-transform-origin: top right;
111 -ms-transform: rotate(432deg);
112 -ms-transform-origin: top right;
113 -o-transform: rotate(432deg);
114 -o-transform-origin: top right;
115 transform: rotate(432deg);
116 transform-origin: top right;
117 }
118 .demo .leaf:nth-child( 10n + 6) {
119 -webkit-animation-delay: 0.6s;
120 -moz-animation-delay: 0.6s;
121 -o-animation-delay: 0.6s;
122 animation-delay: 0.6s;
123 -webkit-transform: rotate(396deg);
124 -webkit-transform-origin: top right;
125 -moz-transform: rotate(396deg);
126 -moz-transform-origin: top right;
127 -ms-transform: rotate(396deg);
128 -ms-transform-origin: top right;
129 -o-transform: rotate(396deg);
130 -o-transform-origin: top right;
131 transform: rotate(396deg);
132 transform-origin: top right;
133 }
134 .demo .leaf:nth-child( 10n + 5) {
135 -webkit-animation-delay: 0.5s;
136 -moz-animation-delay: 0.5s;
137 -o-animation-delay: 0.5s;
138 animation-delay: 0.5s;
139 -webkit-transform: rotate(360deg);
140 -webkit-transform-origin: top right;
141 -moz-transform: rotate(360deg);
142 -moz-transform-origin: top right;
143 -ms-transform: rotate(360deg);
144 -ms-transform-origin: top right;
145 -o-transform: rotate(360deg);
146 -o-transform-origin: top right;
147 transform: rotate(360deg);
148 transform-origin: top right;
149 }
150 .demo .leaf:nth-child( 10n + 4) {
151 -webkit-animation-delay: 0.4s;
152 -moz-animation-delay: 0.4s;
153 -o-animation-delay: 0.4s;
154 animation-delay: 0.4s;
155 -webkit-transform: rotate(324deg);
156 -webkit-transform-origin: top right;
157 -moz-transform: rotate(324deg);
158 -moz-transform-origin: top right;
159 -ms-transform: rotate(324deg);
160 -ms-transform-origin: top right;
161 -o-transform: rotate(324deg);
162 -o-transform-origin: top right;
163 transform: rotate(324deg);
164 transform-origin: top right;
165 }
166 .demo .leaf:nth-child( 10n + 3) {
167 -webkit-animation-delay: 0.3s;
168 -moz-animation-delay: 0.3s;
169 -o-animation-delay: 0.3s;
170 animation-delay: 0.3s;
171 -webkit-transform: rotate(288deg);
172 -webkit-transform-origin: top right;
173 -moz-transform: rotate(288deg);
174 -moz-transform-origin: top right;
175 -ms-transform: rotate(288deg);
176 -ms-transform-origin: top right;
177 -o-transform: rotate(288deg);
178 -o-transform-origin: top right;
179 transform: rotate(288deg);
180 transform-origin: top right;
181 }
182 .demo .leaf:nth-child( 10n + 2) {
183 -webkit-animation-delay: 0.2s;
184 -moz-animation-delay: 0.2s;
185 -o-animation-delay: 0.2s;
186 animation-delay: 0.2s;
187 -webkit-transform: rotate(252deg);
188 -webkit-transform-origin: top right;
189 -moz-transform: rotate(252deg);
190 -moz-transform-origin: top right;
191 -ms-transform: rotate(252deg);
192 -ms-transform-origin: top right;
193 -o-transform: rotate(252deg);
194 -o-transform-origin: top right;
195 transform: rotate(252deg);
196 transform-origin: top right;
197 }
198 .demo .leaf:nth-child( 10n + 1) {
199 -webkit-animation-delay: 0.1s;
200 -moz-animation-delay: 0.1s;
201 -o-animation-delay: 0.1s;
202 animation-delay: 0.1s;
203 -webkit-transform: rotate(216deg);
204 -webkit-transform-origin: top right;
205 -moz-transform: rotate(216deg);
206 -moz-transform-origin: top right;
207 -ms-transform: rotate(216deg);
208 -ms-transform-origin: top right;
209 -o-transform: rotate(216deg);
210 -o-transform-origin: top right;
211 transform: rotate(216deg);
212 transform-origin: top right;
213 }
214 </style></head><body>
215 <header id="header">
216 <hgrounp class="white blank">
217 <h1>CSS3制作莲花开放</h1>
218 </hgrounp>
219 </header>
220 <section class="demo">
221 <div class="leaf"></div>
222 <div class="leaf"></div>
223 <div class="leaf"></div>
224 <div class="leaf"></div>
225 <div class="leaf"></div>
226 <div class="leaf"></div>
227 <div class="leaf"></div>
228 <div class="leaf"></div>
229 <div class="leaf"></div>
230 <div class="leaf"></div>
231 </section>
232 </body></html>
web前端:http://www.cnblogs.com/jihua/p/webfront.html
prefixfree.min.js:http://keleyi.com/a/bjad/vjek766g.htm