Question

我正在使用Javascript和CSS制作一个显示各种通知的选框。现在，我使用Javascript在指定的时间间隔内更新transform: translateX()。

Here's a codepen of what I have working so far.

我想让选框环绕，以便屏幕上始终显示文字。目前，它还没有消失，直到一切都消失了。

我发现a similar example（使用CSS关键帧）似乎通过连续两次包含选框文本来解决此问题。如果可能的话，我宁愿不必这样做，因为在活动时，字幕不会是文本，而是一堆图标和其他元素，这可能会变得混乱。

Answer 1

您必须使用两次文本才能达到所需的效果。您引用的编码器控制宽度，以便两个文本永远不会同时位于可见的选取框中。这是another example通过使用jQuery将外部div的宽度与内部div的宽度绑定来实现这一点，并使用white-space：nowrap。我没有写这个代码笔，BTW。

HTML

<div id="maindiv">
  <div id="div1">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
  <div id="div2">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
</div>

CSS

#maindiv{
  border: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

#div1 {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

#div2 {
  display: inline-block;
  animation: marquee2 10s linear infinite;
  animation-delay: 5s;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

的jQuery

$('#maindiv').width($('#div1').width());

CSS：包装Marquee

1 个答案: