HTML 文字左右滚动播放条实现方法 - CSS 动画实现

.scrolling-text {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 10s linear infinite;
}

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

在上面的代码中，我们首先将文字容器的'white-space'属性设置为'nowrap'，这样文字就不会换行。然后将'overflow'属性设置为'hidden'，这样超出容器宽度的文字就会被隐藏起来。

接下来，我们使用'@keyframes'创建一个名为'scroll'的动画，它包含两个关键帧，分别是0%和100%。在0%关键帧中，我们使用'transform'将文字向右平移100%的容器宽度，实现文字向左滚动的效果。在100%关键帧中，我们将文字向左平移100%的容器宽度，使得文字回到初始位置。

最后，我们将动画应用到文字容器上，使用'animation'属性指定动画名称为'scroll'，持续时间为10秒，动画速度为线性，且动画循环播放无限次。

这样，文字容器就会以左右滚动的方式播放文字内容。你可以根据需要调整动画的持续时间、速度和文本内容来满足你的需求。