摘要：大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。利用能做出一些不错的效果，比如。想到用这个属性正合适，于是要来了心型图片，拿到设计师导出的文件，用压缩下得到一个。
遮罩层，如果学过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写比较简单，先定义一条波纹路径，用二次贝塞尔曲线画出重复的两段横向波纹，方便后面做动画，然后引用这个路径做两条波纹出来。
最后在心形容器的元素上加上遮罩，把水波放在这个容器里，加上动画就好了。
其他细节看demo代码。
参考：https://developer.mozilla.org...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114913.html
摘要：说明中的属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。好吧，这个概念可能有点不好理解，先看图。 说明 CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。 好吧，这个概念可能有点不好理解，先看图。 showImg(https://segmentfault.com/img/bVXPSW?w=919&h=136);...
摘要：说明中的属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。好吧，这个概念可能有点不好理解，先看图。 说明 CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。 好吧，这个概念可能有点不好理解，先看图。 showImg(https://segmentfault.com/img/bVXPSW?w=919&h=136);...
摘要：说明中的属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。好吧，这个概念可能有点不好理解，先看图。 说明 CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。 好吧，这个概念可能有点不好理解，先看图。 showImg(https://segmentfault.com/img/bVXPSW?w=919&h=136);...
摘要：说明中的属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。好吧，这个概念可能有点不好理解，先看图。 说明 CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。 好吧，这个概念可能有点不好理解，先看图。 showImg(https://segmentfault.com/img/bVXPSW?w=919&h=136);...
摘要：说明这次的重点就在于两个属性，属性属性这两个属性分别是两种实现方式的关键。属性简单说，就是能让元素的某一部分显示或隐藏。我们看张图就能明白，第二种方式实现的原理了总结这次说的这两种方式，应该算是很容易理解了，希望对大家有点帮助。 说明 这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。 解释 方式一 效果图 ...
阅读 1677·2021-11-23 09:51
阅读 1319·2021-11-19 09:40
阅读 2996·2021-11-11 11:01
阅读 928·2021-09-27 13:34
阅读 1603·2021-09-22 15:56
阅读 1977·2019-08-30 15:52
阅读 948·2019-08-30 14:13
阅读 3334·2019-08-30 14:10
