文章关键字 ‘mask’

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

2017年11月7日,星期二

上周我做了个demo,使用SVG实现了一个彩条圆环倒计时效果,使用SVG实现的优点是兼容性非常好,不足在于学习成本比较高,于是我就琢磨有没有更简单的方法实现类似的多彩圆环渐变效果,最好纯CSS就能搞定。绞尽脑汁想出了下面三种实现方法……

阅读全文…

客栈说书:CSS遮罩CSS3 mask/masks详细介绍

2017年11月6日,星期一

CSS mask遮罩属性目前除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其Firefox浏览器,从版本55开始,已经全面支持了CSS3 mask属性。并且mask属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。

阅读全文…

-webkit-box-reflect属性简介及元素镜像倒影实现

2016年08月14日,星期日

玻璃,水面会有倒影,有时候我们在web中模拟一些效果,或者实现一些质感的时候,也是需要投影效果的。那我们该如何实现呢?本文从-webkit-box-reflect入手,按照浏览器,依次介绍各种投影效果的实现,很多demo,很多截图很多源代码展示,希望本文的内容能够对您的学习有所帮助!

阅读全文…