CSS3之绽放的花朵(网页效果每日一更)_html/css_WEB-ITnose
程序员文章站
2022-04-26 21:29:09
...
今天,带来的是纯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等属性,对于不同浏览器会产生兼容性问题,只需添加对应的浏览器私有头即可,如上。
享受代码,享受生活,网页效果,每日一更。