• 看了一些实现水波纹特效的文章,使用波纹图片,然后使用css让它动起来,不过这似乎麻烦了一点
    后来看到同事说的colorUI的实现方法,确实简单不少,这里做个记录
  1. 使用一张动图,使用图片标签
    水波纹

2.给这个图片标签加上css,波纹颜色会跟随屏幕颜色

mix-blend-mode:screen; 
  1. 改变波纹颜色:给这个图片标签加个父元素,然后给父元素设置背景颜色
background: rgba(198, 235, 231, 1);

然后就这样简单的实现的水波纹特效:

微信图片_20220324173759.png

文章作者: LrMaker
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 最上级
前端 css
喜欢就支持一下吧