纯CSS连续水平文本滚动不间断 [英] Pure CSS Continuous Horizontal Text Scroll Without Break

问题描述

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

I'm trying to create a news ticker with horizontal text that scrolls continuously without a break between loops. Ideally, the solution would be pure css/html, but I don't know if that's possible. Here's my rudimentary attempt so far: http://jsfiddle.net/lgants/ncgsrnza/. Note that the fiddle contains an unwanted break between each loop.

<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;
}

推荐答案

您可以尝试使用两个字幕并将其中一个动画的延迟动画设置为2.5s，这是完整动画（5s）的一半。

You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).

.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>

这篇关于纯CSS连续水平文本滚动不间断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！