Question

我试图创建一个水平文本的新闻自动收录器，它可以连续滚动而不会在循环之间中断。理想情况下，解决方案将是纯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;
}

Answer 1

您可以尝试使用两个马戏团，并使用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>

Answer 2

这类似于上面的答案。我是从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>

纯CSS连续水平文本滚动不间断

2 个答案: