再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置 -webkit-background-clip:text,然后利用 animation 移动子 div ,去窥探图片。
效果如下(请在 Chrome 内核浏览器下观看):
CodePen Demo
其实还有很多有趣的用法,只要敢想并动手实践,会发现 CSS 真的乐趣挺多的。
当然很多人会吐槽这个属性的兼容性,确实,我个人觉得前端现在的生态有一点面向未来编程的感觉(调戏)。不过提前掌握总体而言利大于弊,多多拓宽自己的视野。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。