CSS实现镂空效果

2018年10月30日

CSS Mask 属性

和 Sketch 里面的 Mask 一样,CSS Mask 可以让蒙版区域区域透过去,不透明区域保留显示出来。

用法和 background 基本一致,学习零成本。比如 mask-image, mask-origin, mask-position, mask-repeat, mask-size 都和 background 一致。因为过于简单,不在这里啰嗦,更多用法还是看文档 或者 张鑫旭-CSS遮罩CSS3 mask/masks详细介绍

使用 mask 最终我的需求实现效果是这样的:

effect

See the Pen Using Mask To Create Ticket Hollow Effect. by Helkyle (@HelKyle) on CodePen.

思考半天的需求,切一张图,写一行核心代码就解决了。关键点足够简单!好用!随随便便都能做出很酷炫的效果

See the Pen Mask Effect – DJI by Helkyle (@HelKyle) on CodePen.

值得一提,mask 支持 svg, png 还可以用 gif,比如 Codepen 有人做了个海绵宝宝动画。

See the Pen #CodePenChallenge – Animated css mask-image by Tony Banik (@tonybanik) on CodePen.

核心代码只有一行, 用了一张海绵宝宝 gif。没有 mask 属性,真不知道怎么下手。

img {
  mask-image: url(https://user-gold-cdn.xitu.io/2018/10/18/1668599f2b92301d?w=500&h=295&f=gif&s=296531);
}
复制代码
spongebob

等等,那兼容性怎么样?

兼容性

caniuse

从 CanIUse 上看,当前 mask 兼容性达到 83.15%(大部分需要加上 -webkit- 前缀),IE && Edge 完全不支持。对于部分不支持的浏览器,还可以使用 Feature Query 进行兼容。

@supports not (mask-size: cover) {
	// 不支持的样式
}

相关文章:


作者:w3ctrain
链接:https://juejin.im/post/5bc8184ee51d450e81090d94
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Leave a Comment