html字体自动变化颜色,HTML css 实现字体渐变颜色

利用CSS中的-webkit-gradient背景渐变属性实现，-webkit-gradient是background的一个属性值，webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] )。

.colorful{

width: 250px;

font-size: 20px;

background-image:

-webkit-gradient( linear, left top, right top, color-stop(0, #f22),

color-stop(0.15, #f2f),

color-stop(0.3, #22f),

color-stop(0.45, #2ff),

color-stop(0.6, #2f2),

color-stop(0.75, #2f2),

color-stop(0.9, #ff2),

color-stop(1, #f22) );

color: transparent;

-webkit-background-clip: text;

-moz-background-clip: text;

-ms-background-clip: text

}

十步杀一人，千里不留行。

效果

span {

background: linear-gradient(to right, red, blue);

-webkit-background-clip: text;

color: transparent;

}

字体渐变颜色

效果

参考：

https://blog.csdn.net/qq_42331027/article/details/90611599

https://www.jianshu.com/p/8a5c0f1b8ccf