CSS3之绽放的花朵(网页效果--每日一更)

　　今天，带来的是纯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等属性，对于不同浏览器会产生兼容性问题，只需添加对应的浏览器私有头即可，如上。

　　享受代码，享受生活，网页效果，每日一更。