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