CSS 实现的水波纹效果

更新日期: 2017-06-22 阅读次数: 15078 分类: CSS

在 Chrome 帮助页看到的。

实现代码

img src="http://www.google.com/intl/en/chrome/assets/common/images/chrome_logo_2x.png" alt="Chrome" id="logo" style="-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));"

实际上可以想象成,两个同心圆,两个圆之间的部分就是水波。需要使用 js 动态修改两 个圆的半径,以实现动态变化。

这里用到了 -webkit-mask, -webkit-gradient

  • -webkit-mask 相当与在图片前面加了一个面具,可以用来实现模糊,切割等效果。
  • -webkit-gradient 用于实现梯度渐变,就是最终看到的水纹效果。

语法解释:

Chrome 的效果

鼠标放在左上角 logo 上。

  • https://support.google.com/chrome/?p=help&ctx=keyboard

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式