CSS 动画实现变色移动跑马灯效果代码

这是一个跑马灯效果的文字，字体会变色移动。

.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
    color: red;
  }
  50% {
    transform: translateX(-100%);
    color: blue;
  }
  100% {
    transform: translateX(0%);
    color: green;
  }
}

// 获取跑马灯元素
var marquee = document.querySelector('.marquee');

// 获取文本宽度
var textWidth = marquee.firstElementChild.offsetWidth;

// 设置跑马灯宽度
marquee.style.width = textWidth + 'px';

以上代码会在页面上显示一个跑马灯效果的文字，文字会以红色开始，然后变为蓝色，最后变为绿色，同时向左移动，然后循环播放。