js文字滚动效果实现

可以使用CSS和JavaScript来实现文字滚动效果。以下是一种简单的实现方法：

HTML代码：

<div class="scroll-text">
  <p>这是要滚动的文字。</p>
</div>

CSS代码：

.scroll-text {
  overflow: hidden;
}

.scroll-text p {
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript代码：

// 如果需要停止滚动，可以调用该函数
function stopScroll() {
  var scrollText = document.querySelector('.scroll-text');
  var scrollP = document.querySelector('.scroll-text p');
  scrollText.removeChild(scrollP);
  scrollText.innerHTML += '<p>' + scrollP.innerText + '</p>';
}

解释：

- `.scroll-text` 元素的 `overflow` 属性设置为 `hidden`，表示超出它的部分会被隐藏。
- `.scroll-text p` 元素的 `white-space` 属性设置为 `nowrap`，表示它的文本不会自动换行。
- `.scroll-text p` 元素的 `animation` 属性设置了一个名为 `scroll` 的动画，它会在 10 秒内沿着 X 轴向左滚动，重复播放。
- `@keyframes` 规则定义了名为 `scroll` 的动画，它有两个关键帧。在第一帧（0%）中，元素的 `transform` 属性设置为 `translateX(0%)`，表示文本不偏移。在第二帧（100%）中，元素的 `transform` 属性设置为 `translateX(-100%)`，表示文本向左偏移 100% 的距离。
- `stopScroll` 函数会将 `.scroll-text p` 元素从 `.scroll-text` 中移除并重新添加它，这会导致动画停止。