• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

mask-image的应用

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0702/4816.html 1190000019634015

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

CSS中也有遮罩这个属性 —— mask-image,但是这么多年了,很多浏览器还不支持,Chrome还需要加前缀。利用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...

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!