mask-image的应用

遮罩层，如果学过Flash的同学应该都听过，跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞，我们可以通过洞看卡纸后面的物体，这里卡纸相当于遮罩层，只不过洞是遮罩层不透明的部分，其他部分是遮罩层透明的部分，与我们想象中的正好相反。

CSS中也有遮罩这个属性 —— 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写比较简单，先定义一条波纹路径，用二次贝塞尔曲线画出重复的两段横向波纹，方便后面做动画，然后引用这个路径做两条波纹出来。

<svg viewBox="0 0 120 125">
  <defs>
    <path id="wave" d="M 0 0 C 30 0, 30 15, 60 15, 90 15, 90 0, 120 0, 150 0, 150 15, 180 15, 210 15, 210 0, 240 0 v 125 h -240 z"/>
  </defs>
  <use class="wave" xlink:href="#wave" x="0" y="1" />
  <use class="wave" xlink:href="#wave" x="0" y="0" />
</svg>

最后在心形容器的元素上加上遮罩，把水波放在这个容器里，加上动画就好了。

其他细节看demo代码。

参考：https://developer.mozilla.org...