使用css实现文字横向滚动循环

要实现文字横向滚动循环效果，可以使用 CSS 的动画和@keyframes关键帧来创建。下面是一个示例，演示如何使用 CSS 实现文字的横向滚动循环：

HTML代码

<div class="scrolling-text">
  <span>This is a scrolling text that loops horizontally.</span>
</div>

CSS 代码：

.scrolling-text {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.scrolling-text span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite; /* 调整动画时长和效果 */
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

在上述代码中，.scrolling-text 是一个具有 overflow: hidden; 属性的容器，用于隐藏超出容器宽度的文本部分。.scrolling-text span 是包含滚动文本的内联元素，通过设置padding-left: 100%;将文本向右移动到容器的最右侧。

然后，通过animation属性设置动画效果。marquee 是定义的动画名称，20s 是动画的持续时间，linear 是动画的缓动函数，infinite 表示动画无限循环播放。

@keyframes marquee 定义了动画的关键帧。在 0% 的关键帧中，文本的 transform 属性设置为 translateX(0)，表示文本不发生偏移。在 100% 的关键帧中，文本向左平移 -100%，实现了横向滚动效果。

通过调整动画的持续时间、缓动函数和偏移量，你可以自定义滚动循环的速度和效果。