欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

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