原生JS实现文字跑马灯

好的，以下是一个简单的原生JS实现文字跑马灯的代码示例：

HTML：

<div class="marquee">
  <span>这是一段跑马灯文字</span>
</div>

CSS：

.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

.marquee span {
  display: inline-block;
  padding-right: 100%;
  animation: marquee 10s linear infinite;
}

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

JS：

// 获取跑马灯容器和文字元素
var marquee = document.querySelector('.marquee');
var text = marquee.querySelector('span');

// 计算文字宽度
var textWidth = text.offsetWidth;

// 将文字元素复制一份并添加到跑马灯容器末尾
marquee.innerHTML += marquee.innerHTML;

// 设置动画时间为文字宽度的10倍
var duration = textWidth * 10;

// 设置动画持续时间和延迟时间
text.style.animationDuration = duration + 'ms';
text.style.animationDelay = duration + 'ms';

以上代码实现了一个简单的文字跑马灯，文字会水平滚动并在滚动到末尾时无缝地开始重复滚动，直到动画停止。你可以根据需要自定义样式和动画时间。