css3 实现文字横幅无缝滚动

要实现文字的横幅无缝滚动，可以使用CSS3的animation和keyframes。以下是一个简单的例子：

HTML:

<div class="scrolling-text">
  这是一段将要无缝滚动的文字。
  这是一段将要无缝滚动的文字。
  这是一段将要无缝滚动的文字。
</div>

CSS:

.scrolling-text {
  overflow: hidden; // 确保超出部分不显示
  white-space: nowrap; // 确保文字在一行内显示
  margin: 0;
  padding-left: 100%; // 初始位置向左偏移100%，确保可以滚动
  animation: scroll 5s linear infinite; // 应用滚动动画
}
 
@keyframes scroll {
  0% {
    transform: translateX(0); // 初始状态
  }
  100% {
    transform: translateX(-100%); // 结束状态，向左移动100%，实现循环滚动
  }
}

这段代码会使得.scrolling-text内的文本无缝滚动。animation属性定义了滚动的持续时间、计时函数和滚动方式，@keyframes scroll定义了滚动的起点和终点。通过调整animation的时长和@keyframes中的移动距离，可以控制滚动的速度和循环的周期。