css属性中有一个background-clip，用于设置绘图的背景，它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上，还有一个属性是text-fill-color，它也是设置对象中文字的填充颜色，和color作用一样，它的优先级比color大，还有就是他的兼容性不太好，只适用于谷歌。靠这两个属性我们就可以设置好看的字体
.text{-webkit-background-clip: text;
background-clip: text;
background-image:linear-gradient(rgb(255,255,0),rgb(0,255,255));
font-size: 20px;
width:120px;
-webkit-text-fill-color: transparent;
}
1234567
就是这样，再配合动画可以做出更好的效果
.text{-webkit-background-clip: text;
width: 200%;
background-clip: text;
background-image:linear-gradient(-45deg,rgb(255,255,0),rgb(0,255,255));
font-size: 20px;
width:120px;
animation: shine 2s infinite;
background-blend-mode: hard-light;
background-size: 200%;
color: white;
-webkit-text-fill-color: transparent;
}
@keyframes shine {
from {
background-position: 100%;
}
to {
background-position: 0;
}
}
123456
background-blend-mode是背景层颜色的混合模式，hard-height是高亮，这样子字体颜色就会从左到右变换
