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

Posted 2023-05-09

【中文标题】滚动文本中的第一个文本如何落后于最后一个文本

【英文标题】：How do first text come behind to last text in scrolling text

【发布时间】：2021-09-28 08:28:21

【问题描述】：

我想添加一个滚动文本区域。实际上我使用了 ma​​rquee 标签 并且它可以工作，但是第一个文本没有落后于最后一个文本并且不再支持 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>

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

【参考方案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>

【讨论】：

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