当前位置:Gxlcms > html代码 > CSS3波浪简单模拟我是波浪,我有起伏,有大波与小波(坏笑中.)_html/css_WEB-ITnose

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

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

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

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

原理简单阐述

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

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

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

波浪动画CSS

波浪动画HTML

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

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

好咯,代码附送完毕。

人气教程排行