纯 CSS 连续水平文本滚动不中断答案

【问题标题】：Pure CSS Continuous Horizontal Text Scroll Without Break纯 CSS 连续水平文本滚动不中断
【发布时间】：2018-02-01 11:55:07
【问题描述】：

我正在尝试创建一个带有水平文本的新闻自动收报器，该文本连续滚动而不会在循环之间中断。理想情况下，解决方案将是纯 css/html，但我不知道这是否可能。到目前为止，这是我的初步尝试：http://jsfiddle.net/lgants/ncgsrnza/。请注意，小提琴在每个循环之间包含不需要的中断。

<p class="marquee"><span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text</span></p>


    .marquee {
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
    }
    
    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 5s linear infinite;
    }

【问题讨论】：

嗯...是否可以复制文本？否则我想克隆文本层几次就需要一点 JS
@lumio 重复文本是什么意思？我将使用 React，因此重用组件非常容易。
让我试着解释一下... :) 给我几分钟
只需阅读其他答案 - 除了短文本问题之外，它应该可以正常工作

标签： html css

【解决方案1】：

这类似于上面的答案。我是从 Next.js 的官方网站上拿的。他们将其与 SVG 一起使用，制作了一个滑块，以显示哪些流行公司正在使用他们的框架。

.wrapper {
  max-width: 100%;
  overflow: hidden;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 10s linear infinite;
}

.marquee p {
  display: inline-block;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

<div class="wrapper">
  <div class="marquee">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.
    </p>
  </div>
</div>

【讨论】：

这取决于容器的宽度。如果宽度很高，文本会在页面中间突然出现。
@MartinMeeser 你是对的。但这取决于特定（用户）浏览器渲染移动段落的速度（尤其是在 X 轴平移之前）。并且可以通过减慢动画在一定程度上防止这种情况发生。

【解决方案2】：

您可以尝试使用两个选取框并将其中一个设置为延迟动画 2.5 秒，这是完整动画 (5 秒) 时间的一半。

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

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

.marquee2 span {
  animation-delay: 2.5s;
}

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

<p class="marquee">
  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span>
</p>
<p class="marquee marquee2">
  <span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text -&nbsp;</span>
</p>

【讨论】：

只是一个评论：不需要复制关键帧 (marquee2) 来实现这个概念。
@rmurph46 稍微清理了您的答案以减少冗余代码，修复错误并将其带到堆栈片段。干得好！
如果文字太短，您可以继续复制选取框并调整动画延迟。或者，您可以使用 js 以特定时间间隔删除/添加带有动画的类，但@lgants 想要纯 css/html。
我可以通过向第一个跨度添加负动画延迟并将第二个跨度设置为没有延迟来使文本从左侧开始。 .marquee1 span { animation-delay: -2.5s; } .marquee2 span { animation-delay: 0s; }
@AndrewHawes 谢谢