js文字无缝滚动

                                实现跑马灯的特效可以使用 HTML 和 CSS 中的动画和样式属性来操作。
复制

首先在 HTML 中创建一个容器元素，例如一个 div 标签，并将其中内容进行水平排列，可以通过设置该标签的 display 属性为 flex，再设置其宽度和 overflow 属性为 hidden 来实现。具体代码如下：

<div class="marquee-container">
  <span>这是一条跑马灯文字1</span>
  <span>这是一条跑马灯文字2</span>
  <span>这是一条跑马灯文字3</span>
  <span>这是一条跑马灯文字4</span>
  <span>这是一条跑马灯文字5</span>
  <span>这是一条跑马灯文字6</span>
</div>复制

接着，在 CSS 中对容器元素进行样式设置，使用动画属性（animation）来实现文字无限滚动的效果。具体步骤如下：

1. 设置 marquee-container 元素的 display 为 flex，将内部子元素都横向排列；
2. 设置 overflow: hidden; 隐藏溢出部分的文本；
3. 定义动画滚动的方式，例如由右向左，可以添加以下 CSS 样式：@keyframes marquee {0% {transform: translateX(100%);} 100% {transform: translateX(-100%);}}
4. 将动画应用于元素上，例如：animation: marquee 12s linear infinite; （表示滚动一次所需时间为12秒，变化是线性的，无限循环）。

完整代码如下所示：

.marquee-container {
  display: flex;
  width: 100%;
  overflow: hidden;
}
 
.marquee-container span {
  white-space: nowrap;
  margin-right: 30px;
}
 
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
 
.marquee-container span {
  animation: marquee 12s linear infinite;
}复制

通过以上的HTML和CSS代码实现了一个跑马灯特效。