css实现渐变字体和流光字体

时间：2019-12-18 11:54:08 收藏：0 阅读：299

这是段渐变文本

.text{
     font-size: 30px;
     font-weight: bold;
     background-image: linear-gradient(#ed3f27, #9b0999);
     -webkit-background-clip: text;
     color: transparent ;
}

这是段流光文本

.text2{
     -webkit-text-fill-color: transparent;
     background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
     background-size: 200%,100%;
     -webkit-background-clip: text;
     -webkit-animation: word 5s linear infinite ;
}
@keyframes word {
     0%{background-position: 0 0}
     100%{background-position: -100% 0}
}

参考：CSS3 text-fill-color简介及应用展示

原文：https://www.cnblogs.com/buerwei/p/12058868.html