效果截图:
HTML代码:
<ul class="gradient-text">
<li>1、CSS文字渐变动画简单定义</li>
<li>2、CSS文字渐变动画简单定义|CSS文字渐变动画简单定义</li>
<li>3、CSS文字渐变动画简单定义|CSS文字渐变动画简单定义|CSS文字渐变动画简单定义</li>
</ul>
CSS代码:
ul li{list-style: none;}
@supports (-webkit-transform: scale(0)){
.gradient-text{
background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-size: 200% 100%;
animation: zero-to-hundred 5s infinite linear;
}
}
@-webkit-keyframes zero-to-hundred{
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}