今天，带来的是纯CSS3打造的效果--绽放的花朵。
先来看效果吧：亲，请点击这里
这是纯CSS3样式打造的效果，关键是采用了animation属性和transform属性。详细请看下面代码。
HTML结构：
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
CSS样式：
<style type="text/css">
.div1{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa1 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a1 10s ease 2s infinite alternate;
}
.div2{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa2 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a2 10s ease 2s infinite alternate; }
.div3{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa3 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a3 10s ease 2s infinite alternate;
}
.div4{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa4 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a4 10s ease 2s infinite alternate;
}
.div5{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa5 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a5 10s ease 2s infinite alternate;
}
.div6{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa6 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a6 10s ease 2s infinite alternate;
}
.div7{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa7 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a7 10s ease 2s infinite alternate;
}
.div8{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa8 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a8 10s ease 2s infinite alternate;
}
.div9{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
transform-origin: 0px 300px;
transform: rotate(-45deg);
}
@-webkit-keyframes wa1{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-125deg);}
}
@keyframes a1{
from{transform: rotate(-45deg);}
to{transform: rotate(-125deg);}
}
@-webkit-keyframes wa2{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-105deg);}
}
@keyframes a2{
from{transform: rotate(-45deg);}
to{transform: rotate(-105deg);}
}
@-webkit-keyframes wa3{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-85deg);}
}
@keyframes a3{
from{transform: rotate(-45deg);}
to{transform: rotate(-85deg);}
}
@-webkit-keyframes wa7{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-65deg);}
}
@keyframes a7{
from{transform: rotate(-45deg);}
to{transform: rotate(-65deg);}
}
@-webkit-keyframes wa4{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(35deg);}
}
@keyframes a4{
from{transform: rotate(-45deg);}
to{transform: rotate(35deg);}
}
@-webkit-keyframes wa5{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(15deg);}
}
@keyframes a5{
from{transform: rotate(-45deg);}
to{transform: rotate(15deg);}
}
@-webkit-keyframes wa6{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-5deg);}
}
@keyframes a6{
from{transform: rotate(-45deg);}
to{transform: rotate(-5deg);}
}
@-webkit-keyframes wa8{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-25deg);}
}
@keyframes a8{
from{transform: rotate(-45deg);}
to{transform: rotate(-25deg);}
}
</style>
首先，先将一个正方形的盒子，通过border-radius属性控制圆角边框，令其展现出花瓣的效果。因为，调整出来的花瓣的顶点是在右上角，所以我们需要将其逆时针旋转45度，令其垂直。然后，就需要定义动画效果了。此例，仅仅是对webkit内核的浏览器和标准浏览器进行配置，如需要对其他浏览器设置兼容，可以将动画效果，@keyfarmes改为-o-keyframes(Opera浏览器)，@-moz-keyframes(FireFox浏览器)，@-webkit-keyframes(Safari and Chrome浏览器)。当定义好了动画，就可以进行调用了。使用animation:动画名 即可。在此，不详细介绍其参数的含义。小编，觉得应由读者自行了解，方能印象深刻。
注：其中，tranform属性、tranform-origin等属性，对于不同浏览器会产生兼容性问题，只需添加对应的浏览器私有头即可，如上。
享受代码，享受生活，网页效果，每日一更。