CSS3 波浪简单模拟我是波浪，我有起伏，有大波与小波（坏笑中.）_html/css_WEB-ITnose
程序员文章站
2022-04-30 20:57:38
...
我是波浪，我有起伏，我有大波与小波（坏笑中...）
最近改版网站，一般也不会去写动画，但是有些网站还是需要的，故拿出一个较简单的动画出来分享，很简单很简单。
原理简单阐述
其实很简单，使用一张美工做好了的2400px宽度的3个不同起伏的波浪，然后自己合成为一张【精灵图片】（有助于一起加速加载和同时加载）
有了素材就好办了，使用一个容器把3个div背景的波浪堆在一起，然后使用css3的偏移进行移动，当然左右和上下都要，然后慢慢调整为一个适合的时间和延迟。
废话不多说，先上演示地址：http://sandbox.runjs.cn/show/akodn0vt
波浪动画CSS
波浪动画HTML
我是波浪，我有起伏，我有大波与小波（坏笑中...） 我是波浪，我有起伏，我有大波与小波（坏笑中...）
好咯，代码附送完毕。