蒙版层的应用，如果你学过Flash，应该听说过，类似于PS的剪贴蒙版。大体效果是遮罩层的重叠部分和遮罩层的不透明部分可见，但不显示遮罩层。类似于在现实世界中给A4纸板开一个洞，我们可以通过这个洞看到纸板后面的物体。这里的硬纸板相当于遮罩层，但是孔是遮罩层不透明的部分，其他部分是遮罩层。盖子的透明部分和我们想象的刚好相反。CSS中也有一个mask属性——mask-image，但是这么多年过去了，支持的浏览器也需要加上前缀，比如-webkit-mask-image。使用mask-image可以做出一些不错的效果，比如https://codepen.io/inegoita/p...。之前做过活动券的需求，右下角是水印，不同的券有不同的颜色。如果直接使用图片，可能需要不同的图片，但是使用mask-image，只需要一张图片，并且可以通过CSS控制改变颜色。http://demo.vczhan.com/css/ma...前几天有朋友接到一个请求，想用心形容器里的水波来体现亲切感。水波是动画效果，限制在容器内。想着用mask-image属性刚刚好，弄了一张心形的图片，拿到了设计师导出的SVG文件，用SVGO压缩得到了一个SVG。此外，水波显示在内容器中。本来想直接把心形的SVG缩小，结果发现还是有些不一样。幸运的是，可以直接从这个SVG中提取出内部心形的SVG。接下来制作水波，使用SVG写起来比较简单，先定义一个波纹路径，用二次贝塞尔曲线画两个重复的水平波纹，方便后面做动画，然后用这个路径做两个涟漪。
