我受到了这个彩虹文字动画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;
}
}
<div id="shadowBox">
<h3 class="rainbow">COMING SOON</h3>
</div>
.rainbow_text_animated
动画的持续时间来自由改变速度。(例如将6s
更改为12s
以使速度减慢一倍)目前它正在将渐变背景向右移动,然后向左移动,然后再向右移动等等。这创造了“循环”效果。 - Austen Holland