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

效果截图：