点击这里查看效果：http://keleyi.com/a/bjad/32gxxsaw.htm
或者：http://keleyi.com/keleyi/phtml/css3/10a.htm
效果图：
代码如下：
<!DOCTYPE html><html>
<head><meta charset="UTF-8">
<title>CSS3制作莲花开放动画-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>
<style>/*定义变量*/
/*定义Mixins*/
@keyframes openAnimate {
to {
-webkit-transform: rotate(360deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(360deg);
-moz-transform-origin: top right;
-ms-transform: rotate(360deg);
-ms-transform-origin: top right;
-o-transform: rotate(360deg);
-o-transform-origin: top right;
transform: rotate(360deg);
transform-origin: top right;
}
}
body {
background-color: #ccc;
}
.demo {
width: 225px;
height: 225px;
margin: 300px auto 0;
position: relative;
-webkit-transform: rotate(135deg);
-webkit-transform-origin: center center;
-moz-transform: rotate(135deg);
-moz-transform-origin: center center;
-ms-transform: rotate(135deg);
-ms-transform-origin: center center;
-o-transform: rotate(135deg);
-o-transform-origin: center center;
transform: rotate(135deg);
transform-origin: center center;
}
.demo .leaf {
width: 150px;
height: 150px;
border-radius: 150px 0px;
background: linear-gradient(45deg, #bcbec0 8%, #9e1f63 30%, #9e1f63 100%);
opacity: 0.6;
filter: alpha(opacity=60);
position: absolute;
margin-top: 400px;
-webkit-animation: openAnimate 6s ease-in-out infinite alternate;
-moz-animation: openAnimate 6s ease-in-out infinite alternate;
-o-animation: openAnimate 6s ease-in-out infinite alternate;
animation: openAnimate 6s ease-in-out infinite alternate;
}
.demo .leaf:nth-child( 10n + 10) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
-webkit-transform: rotate(540deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(540deg);
-moz-transform-origin: top right;
-ms-transform: rotate(540deg);
-ms-transform-origin: top right;
-o-transform: rotate(540deg);
-o-transform-origin: top right;
transform: rotate(540deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 9) {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-o-animation-delay: 0.9s;
animation-delay: 0.9s;
-webkit-transform: rotate(504deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(504deg);
-moz-transform-origin: top right;
-ms-transform: rotate(504deg);
-ms-transform-origin: top right;
-o-transform: rotate(504deg);
-o-transform-origin: top right;
transform: rotate(504deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 8) {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;
-webkit-transform: rotate(468deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(468deg);
-moz-transform-origin: top right;
-ms-transform: rotate(468deg);
-ms-transform-origin: top right;
-o-transform: rotate(468deg);
-o-transform-origin: top right;
transform: rotate(468deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 7) {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
animation-delay: 0.7s;
-webkit-transform: rotate(432deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(432deg);
-moz-transform-origin: top right;
-ms-transform: rotate(432deg);
-ms-transform-origin: top right;
-o-transform: rotate(432deg);
-o-transform-origin: top right;
transform: rotate(432deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 6) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
animation-delay: 0.6s;
-webkit-transform: rotate(396deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(396deg);
-moz-transform-origin: top right;
-ms-transform: rotate(396deg);
-ms-transform-origin: top right;
-o-transform: rotate(396deg);
-o-transform-origin: top right;
transform: rotate(396deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 5) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(360deg);
-moz-transform-origin: top right;
-ms-transform: rotate(360deg);
-ms-transform-origin: top right;
-o-transform: rotate(360deg);
-o-transform-origin: top right;
transform: rotate(360deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 4) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
-webkit-transform: rotate(324deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(324deg);
-moz-transform-origin: top right;
-ms-transform: rotate(324deg);
-ms-transform-origin: top right;
-o-transform: rotate(324deg);
-o-transform-origin: top right;
transform: rotate(324deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 3) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-transform: rotate(288deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(288deg);
-moz-transform-origin: top right;
-ms-transform: rotate(288deg);
-ms-transform-origin: top right;
-o-transform: rotate(288deg);
-o-transform-origin: top right;
transform: rotate(288deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 2) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-transform: rotate(252deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(252deg);
-moz-transform-origin: top right;
-ms-transform: rotate(252deg);
-ms-transform-origin: top right;
-o-transform: rotate(252deg);
-o-transform-origin: top right;
transform: rotate(252deg);
transform-origin: top right;
}
.demo .leaf:nth-child( 10n + 1) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-transform: rotate(216deg);
-webkit-transform-origin: top right;
-moz-transform: rotate(216deg);
-moz-transform-origin: top right;
-ms-transform: rotate(216deg);
-ms-transform-origin: top right;
-o-transform: rotate(216deg);
-o-transform-origin: top right;
transform: rotate(216deg);
transform-origin: top right;
}
</style></head><body>
<header id="header">
<hgrounp class="white blank">
<h1>CSS3制作莲花开放</h1>
</hgrounp>
</header>
<section class="demo">
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
<div class="leaf"></div>
</section>
</body></html>
prefixfree.min.js：http://keleyi.com/a/bjad/vjek766g.htm