我从这个Rainbow Text Animation Rainbow-Text-animation中得到了启发，我想仅使用CSS来实现这一目标，而不是使用所有复杂的SCSS编码。
到目前为止，我已经得到了我喜欢的东西，现在我只想使其从左到右移动，并且在一整行中具有多种颜色，而不是一次仅具有一种颜色。
运行代码片段以查看我在说什么。
如您所见，我希望一行中有尽可能多的颜色，而不是整行中有一种颜色（一次仅一种）。
#shadowBox {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.2);
/* Black w/opacity/see-through */
border: 3px solid;
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
animation: colorRotate 6s linear 0s infinite;
}
@keyframes colorRotate {
from {
color: #6666ff;
}
10% {
color: #0099ff;
}
50% {
color: #00ff00;
}
75% {
color: #ff3399;
}
100% {
color: #6666ff; …