HTML5技术

谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text - ChokCoco(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-04 17:00 我要评论( )

再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置-webkit-background-clip:text,然后利用animation移动子 div ,去窥探图片。 效果如下(请在 Chrome 内

再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置 -webkit-background-clip:text,然后利用 animation 移动子 div ,去窥探图片。

效果如下(请在 Chrome 内核浏览器下观看):

CodePen Demo

 

其实还有很多有趣的用法,只要敢想并动手实践,会发现 CSS 真的乐趣挺多的。

当然很多人会吐槽这个属性的兼容性,确实,我个人觉得前端现在的生态有一点面向未来编程的感觉(调戏)。不过提前掌握总体而言利大于弊,多多拓宽自己的视野。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖湾

    【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖

    2017-04-16 18:00

  • 也谈谈我面试的经历 - 朝向远方

    也谈谈我面试的经历 - 朝向远方

    2017-04-06 15:00

  • 使用phonegap获取设备的一些信息 - ganchuanpu

    使用phonegap获取设备的一些信息 - ganchuanpu

    2017-03-30 13:00

  • .NET 十五岁,谈谈我眼中的.NET - 张善友

    .NET 十五岁,谈谈我眼中的.NET - 张善友

    2017-02-16 15:00

网友点评