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