CSS3 莲花盛开动画

点击这里查看效果：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

CSS3 莲花盛开动画相关推荐

css3 呼吸的莲花_CSS3制作莲花盛开动画
[css]代码库 CSS3制作莲花盛开动画 body { background-color: #d4d4d4; } .demo { margin: 40px auto 0; width: 500px; ...
css3 呼吸的莲花_CSS3 莲花盛开动画
1 2 3 CSS3制作莲花开放动画-柯乐义 4 5 6 /*定义Mixins*/ 7 @keyframes openAnimate{ 8 to {9 -webkit-transform:rotate ...
html5 渐变动画效果图,html5+css3城市场景动画_觉唯设计
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.在上一篇文章<盛开的CSS3梦幻荷花>中提到如何用css3制作丰富动画效果的两个思路,当然除此之外,结合使用javascrip ...
css3圆形轨迹动画
<!doctype html> <html lang="en"> <head> <meta char ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
JS框架_(JQuery.js)纯css3进度条动画
百度云盘传送门密码:wirc 进度条动画效果: <!DOCTYPE html> <htmllang="zh"> <head><meta ...

CSS3 莲花盛开动画

CSS3 莲花盛开动画相关推荐

最新文章

热门文章