PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

CSS3 波浪简单模拟我是波浪,我有起伏,有大波与小波(坏笑中.)_html/css_WEB-ITnose

原创
2016-06-24 11:20:16 937浏览

我是波浪,我有起伏,我有大波与小波(坏笑中...)

  最近改版网站,一般也不会去写动画,但是有些网站还是需要的,故拿出一个较简单的动画出来分享,很简单很简单。

 

原理简单阐述

  其实很简单,使用一张美工做好了的2400px宽度的3个不同起伏的波浪,然后自己合成为一张【精灵图片】(有助于一起加速加载和同时加载)

有了素材就好办了,使用一个容器把3个div背景的波浪堆在一起,然后使用css3的偏移进行移动,当然左右和上下都要,然后慢慢调整为一个适合的时间和延迟。

 

废话不多说,先上演示地址:http://sandbox.runjs.cn/show/akodn0vt

 

波浪动画CSS

 

波浪动画HTML

 

            我是波浪,我有起伏,我有大波与小波(坏笑中...)

我是波浪,我有起伏,我有大波与小波(坏笑中...)

 

 

好咯,代码附送完毕。

 

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。