css3实现字体从左到右渐变(原理与思路)

CSS3实现字体颜色渐变，这种需求经常有，写个例子跟还不会的小伙伴们分享下。

效果图：

先上代码，

HTML:

蜡笔小新

CSS:

.text-gradient {

display: inline-block;

color:blue;

font-size: 3em;

font-family: '微软雅黑';

background-image: linear-gradient(to right , #1b89b9, #0a3f7b); //最后三行为文字渐变CSS

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

原理与思路：

代码比较简单，主要是后面三行。

background-image属性

用于设置一个元素的背景图像。这里，给这个属性设置一种可用的背景颜色（渐变色），这样的话，假如背景图像不可用，就会使用背景色带代替。我们正是利用了这一点，达成了渐变效果。

-webkit-background-clip属性

作用是对背景图片进行裁剪，这里值是text，即是把文本内容之外的背景给裁剪掉。可惜这个属性只有chrome支持，这点需要注意！

-webkit-text-fill-color属性

作用是文字颜色填充，这里的值是transparent，即是透明填充。从某种程度上来讲text-fill-color与color基本上的作用是一样的，如果同时设置color与text-fill-color属性，text-fill-color颜色填充会覆盖color的颜色，也就是文字会显示text-fill-color设置的颜色，而不是color设置的颜色（当然这需要在浏览器支持text-fill-color属性的情况下）。同样，这个属性也只有chrome支持，这点需要注意！

tips:

最后，道路千万条，这只是实现文字渐变的其中一种，小伙伴们可以去尝试更多的方法。更有趣的是，以上知识结合动画还可以实现文字镂空和K歌字幕效果，唱K那么久，知道字幕是怎么变的吗？别好奇了，赶紧去试试吧！！