用一行CSS代码快速实现镂空邮票、优惠券效果
这篇文章讲我最近遇到的需求和解决过程中遇到的问题,以及学到新知识。
从最近在做的需求说起,一个优惠券样式,过设计稿的时候认为没什么大不了的,满口答应了。真正开始开发的时候遇到问题,主要是镂空效果实现方式上比较费劲。要求是背景可配,并且票身可以配背景图,然后镂空是真镂空。
设想并尝试了很多种方案,伪类模拟,背景贴图,Canvas 绘制,没有一个能让我满意。前端就是这么难,即使跪下来求设计师妹纸改稿,也没能得到同情,不仅如此,还被甩一脸,你看看,人家滴滴就能做。
我们不一样!!!
没办法,现在的痛都是当初脑子进的 shi,没有商量的余地,干!搜索 ticket 关键字,我在 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 最终我的需求实现效果是这样的:
id="cp_embed_yRvRyG" src="//codepen.io/HelKyle/embed/yRvRyG?height=698&theme-id=0&slug-hash=yRvRyG&default-tab=result&user=HelKyle&pen-title=Using%20Mask%20To%20Create%20Ticket%20Hollow%20Effect." scrolling="no" height="698" allowfullscreen="true" title="Using Mask To Create Ticket Hollow Effect." class="cp_embed_iframe ">
思考半天的需求,切一张图,写一行核心代码就解决了。关键点足够简单!好用!随随便便都能做出很酷炫的效果。
id="cp_embed_ePyENP" src="//codepen.io/HelKyle/embed/ePyENP?height=441&theme-id=0&slug-hash=ePyENP&default-tab=result&user=HelKyle&pen-title=Mask%20Effect%20-%20DJI" scrolling="no" height="441" allowfullscreen="true" title="Mask Effect - DJI" class="cp_embed_iframe ">
值得一提,mask 支持 svg, png 还可以用 gif,比如 Codepen 有人做了个海绵宝宝动画。
id="cp_embed_aRpvdW" src="//codepen.io/tonybanik/embed/aRpvdW?height=544&theme-id=0&slug-hash=aRpvdW&default-tab=result&user=tonybanik&pen-title=%23CodePenChallenge%20-%20Animated%20css%20mask-image" scrolling="no" height="544" allowfullscreen="true" title="#CodePenChallenge - Animated css mask-image" class="cp_embed_iframe ">
核心代码只有一行, 用了一张海绵宝宝 gif。没有 mask 属性,真不知道怎么下手。
img {mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/spongebob.gif);
}
等等,那兼容性怎么样?
兼容性
src="https://caniuse.com/css-masks/embed" width="100%" height="300">
从 CanIUse 上看,当前 mask 兼容性达到 83.15%(大部分需要加上 -webkit- 前缀),IE && Edge 完全不支持。对于部分不支持的浏览器,还可以使用 Feature Query 进行兼容。
@supports not (mask-size: cover) {// 不支持的样式
}
毒鸡汤时刻
前端技术更新迭代速度特别快,很多几年前还是实验性的属性,转眼已经到了收成的时候。这就体现平时多积累新知识的重要性,比如 grid,houdini,刚接触短期内看不到收成,需要用到的时候想起来有这么个东西,恰好兼容性也跟上来,在别人看来你就很优秀。云淡风轻地说上一句:
没啥,只是因为在人群中多看了一眼。
个人博客
更多前端技术文章
、美术设计
、wordpress插件、优化教程
、学习笔记
尽在我的个人博客喵容 - 和你一起描绘生活,欢迎一起交流学习,一起进步:https://www.miaoron.com
站内文章推荐:
「前端进阶」史上最全的前端学习路线
「不要重复造轮子系列」 前端常用插件、工具类库汇总
如何保障前端项目代码质量
记录一次基于vue、typescript、pwa的项目由开发到部署
小程序挖坑之路
原文链接:用一行CSS代码快速实现镂空邮票、优惠券效果
用一行CSS代码快速实现镂空邮票、优惠券效果相关推荐
- 增加一行减少一行_【第2171期】一行 CSS 代码的魅力
前言 在某次会上是见过css Doodle制作的美.今日前端早读课文章由shopee@ChokCoco,公号:iCSS前端趣闻投稿分享. 正文从这开始~~ 之前在知乎看到一个很有意思的讨论 一行代码可 ...
- 【译】一行css代码搞定响应式布局
译文出自:闪电矿工翻译组 原文地址: medium.com/free-code-c- 原文作者: Per Harald Borgen 仓库原文链接:issue 译者: hanxiansen 在这篇文章 ...
- html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
- css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程 今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
- Emmet:HTML/CSS代码快速编写规范(转发)
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
- Emmet插件:HTML/CSS代码快速编写神器
Emmet插件的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示 ...
- Emmet:HTML/CSS代码快速编写神器
本文来源:http://www.iteye.com/news/27580,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Emmet的 ...
- html自动补全pspad,Emmet:HTML/CSS 代码快速编写神器
Emmet 的前身是大名鼎鼎的 Zen coding,如果你从事 Web 前端开发的话,对该插件一定不会陌生.它使用仿 CSS 选择器的语法来生成代码,大大提高了 HTML/CSS 代码编写的速度,比 ...
- Emmet for Dreamweaver:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...
最新文章
- python利用numpy创建数组(等比,等差,空数组,1数组)
- I/O复用函数的使用——epoll
- cron4j的Jfinal plugin
- 64位Ubuntu 12.04系统下安装Qt library和Qt Creator全过程记录
- JS函数方法Call Apply Bind运用
- 有图有真相!这世界上,竟有人跟你长得一模一样!
- 贪婪算法+小应用(调度问题)
- 会php学java入门要多久_php8(java入门要多久)
- Hive UDF 中使用hdfs中的文件
- python创建和删除文件有什么区别_python创建和删除文件
- git为私有仓库设置密码_Jenkins与Git最佳实践-1
- Ubuntu无盘工作站安装详细步骤
- UGNX1957安装说明视频教程
- 一天入门Tableau详细教程(上)
- 全球及中国城市规划行业十四五建设方向与运营动态分析报告2022版
- 思科路由器虚拟服务器,解读CISCO路由器基本设置方法
- IOS中使用getUserMedia获取视频流展示到video中,进行人脸识别
- 2020-2021年度第二届全国大学生算法设计与编程挑战赛题解(冬季赛)
- Delphi 位运算符 shl shr or xor and not
- 快速查找硬盘文件的工具
热门文章
- 各种信息学竞赛的含金量
- 桔子浏览器|1M安装包|hao123专属浏览器
- Day2 Python数据类型与运算
- 使用Rythm插件轻松实现JFinal应用的国际化
- c++捷径教程(第三版)chapter11.1类queue的定义和使用的输出问题
- 你好Python -- 极简Python教程
- All in one,EasyCVR解决所有类型的视频协议设备接入的问题(RTSP/Onvif/RTMP/GB28181/Ehome/DSS/IMOS/海康大华宇视SDK)
- 浙大中控ECS700学习笔记二硬件I/O模块
- 北京百知教育科技有限公司签约易客CRM
- 最简单的datatables.js学习