今天，带来的是纯CSS3打造的效果--绽放的花朵。
先来看效果吧：http://webfront.verynet.cc/pc/flower.html
这是纯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等属性，对于不同浏览器会产生兼容性问题，只需添加对应的浏览器私有头即可，如上。
享受代码，享受生活，网页效果，每日一更。
CSS3-Tutorial
HTML-Webseitenproduktion
Die Webseite öffnet sich langsam
Die Webseite kann nicht geöffnet werden
Was tun, wenn die Webseite nicht aufgerufen werden kann?
So richten Sie die automatische Aktualisierung einer Webseite ein
Was sind die CSS3-Gradienteneigenschaften?
HTML zum Erstellen von Webseiten
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
