CSS 实现跑马灯效果 | Marquee 动画教程

要实现 marquee 效果，可以使用 CSS 动画或者 CSS3 的 @keyframes 关键帧来实现。

CSS 动画实现 marquee 效果的代码如下：

.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 10s infinite linear;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

在 HTML 中使用该类名即可实现 marquee 效果：

<div class='marquee'>
  This is a marquee text.
</div>

这段代码会使文本从右侧滚动到左侧，然后无限重复。

如果想要控制滚动速度，可以调整 animation 属性的时间参数，比如：animation: marquee 5s infinite linear; 表示滚动时间为 5 秒。

另外，可以通过调整 translateX 的百分比值来控制滚动的方向和距离。