CSS+JS实现文字渐变/文字跑马灯效果

原创已于 2025-05-12 06:54:31 修改 · 862 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html #css #文字渐变

于 2025-04-22 06:54:29 首次发布

CSS元素动画专栏收录该内容

17 篇文章

订阅专栏

CSS+JS实现文字渐变/文字跑马灯效果

文字颜色渐变
结语

文字颜色渐变

在我上一篇文章中提到了文字渐变色效果：文字渐变色填充，在填充时，我们也可以给样式增加部分JS功能，让颜色动起来。

文字颜色渐变

文字整体颜色随机渐变：

代码实现

<style>
  .hellow-text {
    font-size: 100px;
    font-weight: bold;
    background: linear-gradient(to right, red, blue, violet);
    -webkit-background-clip: text;
    color: transparent;
  }
</style>

<body>
<div class="hellow-text" id="hellowText">文字颜色渐变</div>
</body>

<script>
function updateGradient() {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
  // 随机生成3种颜色
  const randomColor1 = colors[Math.floor(Math.random() * colors.length)];
  const randomColor2 = colors[Math.floor(Math.random() * colors.length)];
  const randomColor3 = colors[Math.floor(Math.random() * colors.length)];
  // 获取hellowText元素
  const hellowText = document.getElementById('hellowText');
  // 重新设置hellowText的backgroundImage属性
  hellowText.style.backgroundImage = `linear-gradient(to right, ${randomColor1}, ${randomColor2}, ${randomColor3})`;
}
// 设置定时器，每秒更新一次渐变颜色
setInterval(updateGradient, 1000);
</script>

效果预览

整体文字渐变

文字颜色跑马灯

除了上述颜色整体变换以外，我们也可以让颜色在水平方向移动，实现颜色跑马灯的效果：

代码实现

<style>
  .hellow-text {
    font-size: 86px;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
	/* 确保渐变图像有足够的空间在元素内移动 */
    background-size: 200% 100%;
	/* 线性移动，无限循环 */
    animation: gradient-marquee 10s linear infinite;
  }
  @keyframes gradient-marquee {
	/* 动画开始时刻 */
    0% {
      background-position: 100% 50%;
    }
	/* 动画结束时刻 */
	100% {
	  background-position: 0% 50%;
	}
  }
</style>

<body>
<div class="hellow-text">渐变颜色跑马灯</div>
</body>