第一步：实现彩虹渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction：用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...：用于指定渐变的起止颜色。
通过background-image: linear-gradient，实现背景渐变。
第二步：背景裁切，文字透明
-webkit-background-clip:text以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。目前只有chrome支持。
color: transparent; 文字颜色透明第三步：使动画动起来
@keyframes sliding {
to {
background-position: -2000vw;
}
}
animation: sliding 100s linear infinite;keyframes改变背景位置，无限循环，实现滚动时序效果
1、@keyframes animationname {keyframes-selector {css-styles;}}
值 | 说明 |
animationname | 必需的。定义animation的名称。 |
keyframes-selector | 必需的。动画持续时间的百分比。 合法值： 0-100% 注意： 您可以用一个动画keyframes-selectors。 |
css-styles | 必需的。一个或多个合法的CSS样式属性 |
2、animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 | 说明 |
animation-name | 指定要绑定到选择器的关键帧的名称 |
animation-duration | 动画指定需要多少秒或毫秒完成 |
animation-timing-function | 设置动画将如何完成一个周期 |
animation-delay | 设置动画在启动前的延迟间隔。 |
animation-iteration-count | 定义动画的播放次数。 |
animation-direction | 指定是否应该轮流反向播放动画。 |
animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
animation-play-state | 指定动画是否正在运行或已暂停。 |
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>彩虹字</title>
<style>
html,
body {
height: 100%;
background-color: #000;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 200px;
text-align: center;
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered
);
background-size: 110vw;
animation: sliding 100s linear infinite;
-webkit-background-clip: text;
color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
</style>
</head>
<body>
<h1>这是一段彩虹字</h1>
</body>
</html>