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

　　今天，带来的是纯CSS3打造的效果--绽放的花朵。

　　先来看效果吧：http://webfront.verynet.cc/pc/flower.html

　　这是纯CSS3样式打造的效果，关键是采用了animation属性和transform属性。详细请看下面代码。

　　HTML结构：

1 2 3 4 5 6 7 8 9 

　　CSS样式：

  1    

　　首先，先将一个正方形的盒子，通过border-radius属性控制圆角边框，令其展现出花瓣的效果。因为，调整出来的花瓣的顶点是在右上角，所以我们需要将其逆时针旋转45度，令其垂直。然后，就需要定义动画效果了。此例，仅仅是对webkit内核的浏览器和标准浏览器进行配置，如需要对其他浏览器设置兼容，可以将动画效果，@keyfarmes改为-o-keyframes(Opera浏览器)，@-moz-keyframes(FireFox浏览器)，@-webkit-keyframes(Safari and Chrome浏览器)。当定义好了动画，就可以进行调用了。使用animation:动画名 即可。在此，不详细介绍其参数的含义。小编，觉得应由读者自行了解，方能印象深刻。

　　注：其中，tranform属性、tranform-origin等属性，对于不同浏览器会产生兼容性问题，只需添加对应的浏览器私有头即可，如上。

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