当前位置:Gxlcms > html代码 > CSS3之绽放的花朵(网页效果每日一更)_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:11人阅读

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

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

人气教程排行