&nbs p;
一、翻出旧玩具，培养新感情
以前，处于爱好，采购了很多的玩具，不管以后会不会用到。当然，我这里的玩具并不是真正的类似这样的玩具：
而是一些技术tip等。
例如，如本文所相关的效果以前就有多次收藏。
首先 ，兼容的文字渐变效果，类似这样的：
原理是这样的：
原文链接是这样的：
CSS 实现兼容性的渐变、高光等文字效果
或者 ，Ch rom e当道的文字渐变效果——有借助 mask -i mage 实现的：
有借助 background-clip + text-fill-color 实现的：
原文链接点击后面：CSS3下的渐变文字效果实现
甚至 有的 文章 已经介绍了渐变动画效果：CSS3 text-fill-color简介及应用展示
既然如此，可能有人会疑问了，那还说个毛线啊？难道要新瓶装旧酒，过气明星露脸刷人气？
实际上，你……说对了。就是新瓶装旧酒！
翻出一些旧玩具，培养些新感情；放些老段子，以免太冷清。
不过 ，人总不会无缘无故是翻箱倒柜，去寻找儿时的时光，童年的记忆的。一般按照 电 视剧的尿性，整理遗物啊，女 朋友 第一次上门啊之类的。那我的那泡尿的轨迹是？
现在的我，身在一个设计 团队 ，自然要与各种视觉、效果打交道。啊，今天交互提出了一个效果：“可不可以让文字像脱衣服一样的，光影闪啊闪~” “当然可以啊！”虽然玩具多年未碰，但是有 哪些 玩具，自己还是清楚的，于是我很干脆的答应加这个效果。
于是，就去跟旧玩具叙旧。哎呀，正好发现以前的玩具是有不足的，于是，今天，就顺便老黄瓜刷绿漆，给玩具润色，修复不足，重回年轻，增进感情，星星的你。
以前文章还没这么多人看，很多好玩具都没注意到。于是，今天，乘着“新瓶装旧酒”的 机会 ，都拉出来溜溜，顺便分享下优化后的实现 方案 。
二、文字遮罩→文字渐变→渐变动画
Demo先行
您可以狠狠地点击这里：文字渐变光影流动动画效果demo
下面为截图（实际效果黄色部分会不停右移，右移，右移，雪移……）：
实际上，之前就有类似效果实现：text-fill-color文字遮罩动画效果demo
但是呢？之前的实现有一个不足，其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了，渐变还要使用图片，简直弱爆了，而且还是 webkit 家族浏览器！显然，有改进的余地。于是，就有了本文的demo.
改进实现代码如下：
@media all and (-webk IT -min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .masked { background-image: -webkit-linear-gra die nt(left, # 147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit -t ext-fill-color: transparent; -webkit-background-clip: text; -webkit- background-size : 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } } @-webkit-keyfr am es masked-animation { 0% { background-position: 0 0;} 100% { background-position: -100% 0;} } 一些说明
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { } 这个查询只对 webkit/blink 内核浏览器有效，可以避免对其他浏览器的污染。但是呢， .masked 对应的所有CSS声明都有 webkit 私有前缀，因此，这里的查询过滤器实际上是多余的。不过，您可以收藏下，说不定您以后就会需要这个玩具。 我这里渐变需要分成了4段，主要是为了动画循环的时候可以无缝拼接，更显自然流畅值本色。 background- Size: 200% 100%; 让 背景图片大小 水 平方 向扩大一倍，这样 background-position 才有移动与变化的空间。 background-clip 实际上是CSS3中的标准属性，有” content “, “ padding “等值。但是，这里的 text 却是私人珍藏玩具，其他浏览器搞不来，也不在规范之中。以上~
匆匆忙忙想到的非图片解决方案，不一定是最好的。您如果有更好的实现方法，欢迎分享。或者您现在就静下心想一想，有没有什么靠谱的idea, 然后立马写个超简demo试验下，说不定会发现新大陆。学习嘛，其实就是这么回事~~
三、与玩具短暂告别
跬步至千里，细流成江海。我的博客也好多年了，收藏的， 积累 的玩具还是很多的。我们可能有这个习惯，有什么新的或不确定的前端知识点就是MDN，或者 opera develo PE r, 或是msdn. 其实呢，下次，不妨试试搜下右上角的搜索框，说不定会发现一些很有用的玩具！
——悄悄跟你讲，这个秘密，一般人我不告诉他！
至此，又得与玩具们暂别，然多年后重见天日，也算有所值了，哈哈！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip: CSS3与文字渐变光影流动动画效果实现 全部内容，希望文章能够帮你解决 html5教程-小tip: CSS3与文字渐变光影流动动画效果实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip: CSS3与文字渐变光影流动动画效果实现的详细内容...