CSS文字渐变动画简单定义

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;}
}

效果截图: