css 背景水波纹、堆叠铺开效果

波纹:
	多个div堆叠,使用同一张背景图片,通过动画延迟,逐个收缩展开,产生波浪的每个圈
	通过展开后依次振幅减小,来模拟真实振幅,振幅通过设置背景图高宽大小,设置依次背景图的高宽差距减少即可

透明波纹:
	设置background-attachment:fixed;	个人理解:因为fixed背景图固定,所以只是伸缩的区别,否则就是背景会随着内容变化,造成轮廓明显
	不设置则为堆叠铺开的效果

效果图:
水波纹:
在这里插入图片描述

在这里插入图片描述

堆叠铺开:
在这里插入图片描述
在这里插入图片描述

Guess you like

Origin blog.csdn.net/weixin_43294560/article/details/121543291