图片-水波显示特效

原创 rollcat 随笔 待整理 1389阅读 2018-01-12 10:09:19 举报

加了背景色渐变,应该很容易看出区别了
前端网上传图片会加水印,所以用的是base64格式,特效只兼容了webkit内核。
用过photoshop蒙板的应该更容易理解,使用层mask的透明度做蒙板,实现渐变色效果
实现的原理大致如此:

图片-水波显示特效

也可以使用
css 代码

以下是使用png图片做为蒙板的方法,注意mask层使用的是png图片
html 代码

附:文字 - 高光水波渐变特效

评论 ( 2 )
最新评论
rollcat 1F 2018-01-12 13:25:21 2F

赞同,不过mask可以把图片部分透明,box-shadow比不了。

hugeannex 2018-01-12 12:10:53 1F

个人感觉,用box-shadow inset 兼容会好一些吧。。。还有canvas。。。