黑马程序员技术交流社区

标题: 【上海校区】幻术，一行代码实现镂空效果 [打印本页]

作者: 不二晨 时间: 2018-10-23 09:38
标题: 【上海校区】幻术，一行代码实现镂空效果
从最近在做的需求说起，一个优惠券样式，过设计稿的时候认为没什么大不了的，满口答应了。真正开始开发的时候遇到问题，主要是镂空效果实现方式上比较费劲。要求是背景可配，并且票身可以配背景图，然后镂空是真镂空。

设想并尝试了很多种方案，伪类模拟，背景贴图，Canvas 绘制，没有一个能让我满意。前端就是这么难，即使跪下来求设计师妹纸改稿，也没能得到同情，不仅如此，还被甩一脸，你看看，人家滴滴就能做。

我们不一样！！！

没办法，现在的痛都是当初脑子进的 shi，没有商量的余地，干！搜索 ticket 关键字，我在 Codepen 上找到类似的效果。

See the Pen CSS Concert ticket purchase by Helkyle (@HelKyle) on CodePen.

看到镂空，渐变，我坚信找到最终解了。看源码，赞！分三段拼接绝对是个好主意！

然鹅！我们的需求是，优惠券整块背景渐变，分成三段那么渐变也得相应地拆成三段写，不能接受。
想起来 ClipPath 貌似可以用来裁切内容。搜到以前在 CSS Tricks 上看过的文章，为效果赞叹不已（你可以在clippy上调教 clip-path）。从文档上看，用在这个场景也同样不合适。镂空部分并不是既不是规则图形，更不是一个整体，放弃。
CSS Mask 属性和 Sketch 里面的 Mask 一样，CSS Mask 可以让蒙版区域区域透过去，不透明区域保留显示出来。
用法和 background 基本一致，学习零成本。比如 mask-image, mask-origin, mask-position, mask-repeat, mask-size 都和 background 一致。因为过于简单，不在这里啰嗦，更多用法还是看文档或者张鑫旭-CSS遮罩CSS3 mask/masks详细介绍，
使用 mask 最终我的需求实现效果是这样的：

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/20 ... ;f=gif&s=296531);}复制代码

等等，那兼容性怎么样？
兼容性

从 CanIUse 上看，当前 mask 兼容性达到 83.15%（大部分需要加上 -webkit- 前缀），IE && Edge 完全不支持。对于部分不支持的浏览器，还可以使用 Feature Query 进行兼容。
@supports not (mask-size: cover) { // 不支持的样式}复制代码毒鸡汤时刻前端技术更新迭代速度特别快，很多几年前还是实验性的属性，转眼已经到了收成的时候。这就体现平时多积累新知识的重要性，比如 grid，houdini，刚接触短期内看不到收成，需要用到的时候想起来有这么个东西，恰好兼容性也跟上来，在别人看来你就很优秀。云淡风轻地说上一句：

没啥，只是因为在人群中多看了一眼。

【转载】
作者：w3ctrain
链接：https://juejin.im/post/5bc8184ee51d450e81090d94

作者: 小影姐姐 时间: 2018-10-25 09:46

作者: 不二晨 时间: 2018-10-25 10:48

作者: 魔都黑马少年梦 时间: 2018-11-1 16:57

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2