CSS3 莲花盛开动画

点击这里查看效果:http://keleyi.com/a/bjad/32gxxsaw.htm

或者:http://keleyi.com/keleyi/phtml/css3/10a.htm

效果图:

CSS3 莲花盛开动画

 

代码如下:

CSS3 莲花盛开动画
  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>
CSS3 莲花盛开动画

web前端:http://www.cnblogs.com/jihua/p/webfront.html

prefixfree.min.js:http://keleyi.com/a/bjad/vjek766g.htm

CSS3 莲花盛开动画

上一篇:asp.net网站优化经验之谈


下一篇:DRILLNET 2.0------第七章 井眼轨道控制