一行多个元素实现文字左右循环滚动效果流畅

你可以使用 CSS3 中的 animation 属性来实现文字左右循环滚动效果。下面是一个例子：

HTML 代码：

<div class="scroll-text">
  <ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
  </ul>
</div>

CSS 代码：

.scroll-text {
  width: 100%;
  overflow: hidden;
}
.scroll-text ul {
  display: flex;
  animation: scroll 10s linear infinite;
}
.scroll-text li {
  margin-right: 20px;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

这个例子中，我们创建了一个 div 容器，设置了它的宽度为 100% ，并将 overflow 属性设置为 hidden ，这样就可以隐藏容器中的超出部分。然后，我们使用了一个无序列表来存放循环滚动的元素。接下来，我们给列表添加了一个 CSS3 动画，通过 animation 属性设置了动画名称、持续时间、动画速度和循环次数。最后，我们使用 @keyframes 规则定义了名为 scroll 的动画，使用 transform 属性来实现元素的左右循环滚动效果。