今天，帶來的是純CSS3打造的效果--綻放的花朵。
先來看效果吧：親，請點擊這里
這是純CSS3樣式打造的效果，關鍵是采用了animation屬性和transform屬性。詳細請看下面代碼。
HTML結構：
1 <div class="div1"></div> 2 <div class="div2"></div> 3 <div class="div3"></div> 4 <div class="div4"></div> 5 <div class="div5"></div> 6 <div class="div6"></div> 7 <div class="div7"></div> 8 <div class="div8"></div> 9 <div class="div9"></div>
CSS樣式：
1 <style type="text/css"> 2 .div1{ 3 position:absolute; 4 top:300px;left:500px; 5 background:pink;opacity:0.6;width:300px;height:300px; 6 z-index: 1; 7 border-radius:300px 0px;; 8 -webkit-transform-origin: 0px 300px; 9 -webkit-transform: rotate(-45deg); 10 -webkit-animation:wa1 10s ease 2s infinite alternate; 11 transform-origin: 0px 300px; 12 transform: rotate(-45deg); 13 animation:a1 10s ease 2s infinite alternate; 14 } 15 .div2{ 16 position:absolute; 17 top:300px;left:500px; 18 background:pink;opacity:0.6;width:300px;height:300px; 19 z-index: 2; 20 border-radius:300px 0px;; 21 -webkit-transform-origin: 0px 300px; 22 -webkit-transform: rotate(-45deg); 23 -webkit-animation:wa2 10s ease 2s infinite alternate; 24 transform-origin: 0px 300px; 25 transform: rotate(-45deg); 26 animation:a2 10s ease 2s infinite alternate; 27 28 } 29 .div3{ 30 position:absolute; 31 top:300px;left:500px; 32 background:pink;opacity:0.6;width:300px;height:300px; 33 z-index: 3; 34 border-radius:300px 0px;; 35 -webkit-transform-origin: 0px 300px; 36 -webkit-transform: rotate(-45deg); 37 -webkit-animation:wa3 10s ease 2s infinite alternate; 38 transform-origin: 0px 300px; 39 transform: rotate(-45deg); 40 animation:a3 10s ease 2s infinite alternate; 41 } 42 .div4{ 43 position:absolute; 44 top:300px;left:500px; 45 background:pink;opacity:0.6;width:300px;height:300px; 46 z-index: 4; 47 border-radius:300px 0px;; 48 -webkit-transform-origin: 0px 300px; 49 -webkit-transform: rotate(-45deg); 50 -webkit-animation:wa4 10s ease 2s infinite alternate; 51 transform-origin: 0px 300px; 52 transform: rotate(-45deg); 53 animation:a4 10s ease 2s infinite alternate; 54 } 55 .div5{ 56 position:absolute; 57 top:300px;left:500px; 58 background:pink;opacity:0.6;width:300px;height:300px; 59 z-index: 5; 60 border-radius:300px 0px;; 61 -webkit-transform-origin: 0px 300px; 62 -webkit-transform: rotate(-45deg); 63 -webkit-animation:wa5 10s ease 2s infinite alternate; 64 transform-origin: 0px 300px; 65 transform: rotate(-45deg); 66 animation:a5 10s ease 2s infinite alternate; 67 } 68 .div6{ 69 position:absolute; 70 top:300px;left:500px; 71 background:pink;opacity:0.6;width:300px;height:300px; 72 z-index: 6; 73 border-radius:300px 0px;; 74 -webkit-transform-origin: 0px 300px; 75 -webkit-transform: rotate(-45deg); 76 -webkit-animation:wa6 10s ease 2s infinite alternate; 77 transform-origin: 0px 300px; 78 transform: rotate(-45deg); 79 animation:a6 10s ease 2s infinite alternate; 80 } 81 .div7{ 82 position:absolute; 83 top:300px;left:500px; 84 background:pink;opacity:0.6;width:300px;height:300px; 85 z-index: 7; 86 border-radius:300px 0px;; 87 -webkit-transform-origin: 0px 300px; 88 -webkit-transform: rotate(-45deg); 89 -webkit-animation:wa7 10s ease 2s infinite alternate; 90 transform-origin: 0px 300px; 91 transform: rotate(-45deg); 92 animation:a7 10s ease 2s infinite alternate; 93 } 94 .div8{ 95 position:absolute; 96 top:300px;left:500px; 97 background:pink;opacity:0.6;width:300px;height:300px; 98 z-index: 8; 99 border-radius:300px 0px;; 100 -webkit-transform-origin: 0px 300px; 101 -webkit-transform: rotate(-45deg); 102 -webkit-animation:wa8 10s ease 2s infinite alternate; 103 transform-origin: 0px 300px; 104 transform: rotate(-45deg); 105 animation:a8 10s ease 2s infinite alternate; 106 } 107 .div9{ 108 position:absolute; 109 top:300px;left:500px; 110 background:pink;opacity:0.6;width:300px;height:300px; 111 z-index: 9; 112 border-radius:300px 0px;; 113 -webkit-transform-origin: 0px 300px; 114 -webkit-transform: rotate(-45deg); 115 transform-origin: 0px 300px; 116 transform: rotate(-45deg); 117 } 118 @-webkit-keyframes wa1{ 119 from{-webkit-transform: rotate(-45deg);} 120 to{-webkit-transform: rotate(-125deg);} 121 } 122 @keyframes a1{ 123 from{transform: rotate(-45deg);} 124 to{transform: rotate(-125deg);} 125 } 126 @-webkit-keyframes wa2{ 127 from{-webkit-transform: rotate(-45deg);} 128 to{-webkit-transform: rotate(-105deg);} 129 } 130 @keyframes a2{ 131 from{transform: rotate(-45deg);} 132 to{transform: rotate(-105deg);} 133 } 134 @-webkit-keyframes wa3{ 135 from{-webkit-transform: rotate(-45deg);} 136 to{-webkit-transform: rotate(-85deg);} 137 } 138 @keyframes a3{ 139 from{transform: rotate(-45deg);} 140 to{transform: rotate(-85deg);} 141 } 142 @-webkit-keyframes wa7{ 143 from{-webkit-transform: rotate(-45deg);} 144 to{-webkit-transform: rotate(-65deg);} 145 } 146 @keyframes a7{ 147 from{transform: rotate(-45deg);} 148 to{transform: rotate(-65deg);} 149 } 150 @-webkit-keyframes wa4{ 151 from{-webkit-transform: rotate(-45deg);} 152 to{-webkit-transform: rotate(35deg);} 153 } 154 @keyframes a4{ 155 from{transform: rotate(-45deg);} 156 to{transform: rotate(35deg);} 157 } 158 @-webkit-keyframes wa5{ 159 from{-webkit-transform: rotate(-45deg);} 160 to{-webkit-transform: rotate(15deg);} 161 } 162 @keyframes a5{ 163 from{transform: rotate(-45deg);} 164 to{transform: rotate(15deg);} 165 } 166 @-webkit-keyframes wa6{ 167 from{-webkit-transform: rotate(-45deg);} 168 to{-webkit-transform: rotate(-5deg);} 169 } 170 @keyframes a6{ 171 from{transform: rotate(-45deg);} 172 to{transform: rotate(-5deg);} 173 } 174 @-webkit-keyframes wa8{ 175 from{-webkit-transform: rotate(-45deg);} 176 to{-webkit-transform: rotate(-25deg);} 177 } 178 @keyframes a8{ 179 from{transform: rotate(-45deg);} 180 to{transform: rotate(-25deg);} 181 } 182 </style>
首先，先將一個正方形的盒子，通過border-radius屬性控制圓角邊框，令其展現出花瓣的效果。因為，調整出來的花瓣的頂點是在右上角，所以我們需要將其逆時針旋轉45度，令其垂直。然后，就需要定義動畫效果了。此例，僅僅是對webkit內核的瀏覽器和標准瀏覽器進行配置，如需要對其他瀏覽器設置兼容，可以將動畫效果，@keyfarmes改為-o-keyframes(Opera瀏覽器)，@-moz-keyframes(FireFox瀏覽器)，@-webkit-keyframes(Safari and Chrome瀏覽器)。當定義好了動畫，就可以進行調用了。使用animation:動畫名 即可。在此，不詳細介紹其參數的含義。小編，覺得應由讀者自行了解，方能印象深刻。
注：其中，tranform屬性、tranform-origin等屬性，對於不同瀏覽器會產生兼容性問題，只需添加對應的瀏覽器私有頭即可，如上。
享受代碼，享受生活，網頁效果，每日一更。