在 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 用于实现梯度渐变，就是最终看到的水纹效果。
语法解释：
- http://stackoverflow.com/questions/3072118/webkit-gradient-syntax
- Masks - apple developer
Chrome 的效果
鼠标放在左上角 logo 上。
- https://support.google.com/chrome/?p=help&ctx=keyboard
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式