Angbike个人博客 > Html+Css > CSS文字渐变动画简单定义
CSS文字渐变动画简单定义
被浏览了1,278次
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;}
}
效果截图: