滚动文本中的第一个文本如何落后于最后一个文本答案

【问题标题】：How do first text come behind to last text in scrolling text滚动文本中的第一个文本如何落后于最后一个文本
【发布时间】：2021-09-28 08:28:21
【问题描述】：

我想添加一个滚动文本区域。实际上我使用了 marquee 标签 并且它可以工作，但是第一个文本没有落后于最后一个文本并且不再支持 marquee 标签。

  <div class="container">
      <ul class="list-group">
          <li class="list-group-item">START TEXT</li>
          <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
          <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
          <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
          <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
          <li class="list-group-item">FİNİSH TEXT</li>
      </ul>
  </div>

第一个文本如何落后于最后一个文本？

【问题讨论】：

标签： javascript html jquery css forms

【解决方案1】：

如果您知道 ul 不仅会垂直填充容器，那么一种简单的方法是拥有列表项的完整副本，并将 ul 元素在 Y 方向上转换一半（就其高度而言）。

这是一个简单的例子。使用转换的优点是会调用 GPU，但您仍然需要注意它正在消耗处理能力（我的笔记本电脑上大约 12% 的 GPU），所以我想如果长时间运行，最终可能会成为电池扁平化器。

.container {
  width: auto;
  height: 100px;
  overflow: hidden;
  border-style: solid;
  display: inline-block;
}

.list-group {
  animation: goup infinite 2s linear;
}

@keyframes goup {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

<div class="container">
  <ul class="list-group">
    <li class="list-group-item">START TEXT</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">FİNİSH TEXT</li>
    <li class="list-group-item">START TEXT</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-group-item">FİNİSH TEXT</li>
  </ul>
</div>

【讨论】：

这很神奇:) !!谢谢先生，它正在工作。