纯CSS实现超出屏幕的长文字轮播（文字走马灯）效果

可以使用 CSS 的 animation 和 @keyframes 来实现文字轮播效果。

下面是一个简单的例子：

<style>
  .scroll-text {
    width: 100%;
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-text span {
    display: inline-block;
    animation: scroll-text 5s linear infinite;
  }
  @keyframes scroll-text {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

<div class="scroll-text">
  <span>这是一段很长的文字，它将在超出屏幕范围后循环滚动。</span>
</div>

在上面的代码中，我们设置了一个名为 `scroll-text` 的 animation，它的 duration 是 5s，timing-function 是 linear，并且设置为无限循环。我们还使用了 `transform: translateX` 来实现文字的滚动效果。