纯css实现文字左右循环滚动效果

可以使用 CSS 动画和 @keyframes 规则来实现文字左右循环滚动的效果。以下是一个示例：

HTML 代码：

<div class="scroll-wrap">
  <div class="scroll-text">这是一段需要滚动的文字，这是一段需要滚动的文字，这是一段需要滚动的文字。</div>
</div>

CSS 代码：

.scroll-wrap {
  overflow: hidden;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

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

解释一下上面的代码：

- `.scroll-wrap` 元素设置了 `overflow: hidden`，以隐藏超出其范围的内容。
- `.scroll-text` 元素设置了 `display: inline-block`，以使其能够在一行中水平排列，并设置了 `white-space: nowrap`，以防止文字换行。
- `@keyframes scroll` 规则定义了一个名为 `scroll` 的动画，它将 `.scroll-text` 元素从左到右平移，然后循环播放。
- `.scroll-text` 元素应用了 `animation` 属性，将 `scroll` 动画应用于它。

您可以根据需要调整动画的持续时间和速度。