幻术,一行代码实现镂空效果

栏目: CSS · 发布时间: 6年前

内容简介:这篇文章讲我最近遇到的需求和解决过程中遇到的问题,以及学到新知识。从最近在做的需求说起,一个优惠券样式,过设计稿的时候认为没什么大不了的,满口答应了。真正开始开发的时候遇到问题,主要是镂空效果实现方式上比较费劲。要求是背景可配,并且票身可以配背景图,然后镂空是真镂空。

幻术,一行代码实现镂空效果

这篇文章讲我最近遇到的需求和解决过程中遇到的问题,以及学到新知识。

从最近在做的需求说起,一个优惠券样式,过设计稿的时候认为没什么大不了的,满口答应了。真正开始开发的时候遇到问题,主要是镂空效果实现方式上比较费劲。要求是背景可配,并且票身可以配背景图,然后镂空是真镂空。

幻术,一行代码实现镂空效果

设想并尝试了很多种方案,伪类模拟,背景贴图,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://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/spongebob.gif);
}

幻术,一行代码实现镂空效果

等等,那兼容性怎么样?

兼容性

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

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

毒鸡汤时刻

前端技术更新迭代速度特别快,很多几年前还是实验性的属性,转眼已经到了收成的时候。这就体现平时多积累新知识的重要性,比如 grid,houdini,刚接触短期内看不到收成,需要用到的时候想起来有这么个东西,恰好兼容性也跟上来,在别人看来你就很优秀。云淡风轻地说上一句:

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

相关文章

Changelog

fix: 事实上设计师很好说话,没有刁难我。

部分风景图片来自 skypixel

幻术,一行代码实现镂空效果 幻术,一行代码实现镂空效果

如果觉得对你有所帮助,可以请我喝杯咖啡。


以上所述就是小编给大家介绍的《幻术,一行代码实现镂空效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Processing语言权威指南

Processing语言权威指南

Casey Reas、Ben Fry / 张静 / 电子工业出版社 / 2013-10-1 / 139.00

本书介绍了可视化艺术中的计算机编程概念,对开源编程语言Processing作了非常详尽的阐述。学生、艺术家、设计师、建筑师、研究者,以及任何想编程实现绘画、动画和互动的人都可以使用它。书中的大部分章节是短小的单元,介绍Processing的语法和基本概念(变量、函数、面向对象编程),涵盖与软件相关的图像处理、绘制,并且给出了大量简短的原型程序,配以相应的过程图像与注释。书中还有一些访谈文章,与动画......一起来看看 《Processing语言权威指南》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具