點擊這裡查看效果：http:///keleyi/phtml/css3/10.htm

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

CSS3制作蓮花

<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: #333333;color:#fff;
}
.demo {
width: 225px;
height: 225px;
margin: 300px;
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.5;
filter: alpha(opacity=50);
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>