Javascript 包装框

我正在用Javascript和CSS制作一个显示各种通知的字幕。 现在，我正在使用Javascript在指定的时间间隔内更新

transform:translateX（）

我想有字幕环绕，以便始终有文本显示在屏幕上。目前，直到一切都消失了，它才重新开始

---

我发现（使用CSS关键帧）通过在一行中包含两次字幕文本似乎解决了这个问题。如果可能的话，我不想这样做，因为字幕在直播时不是文本，而是一堆图标和其他元素，这可能会变得混乱。

你必须有两次文本才能达到你想要的效果。您引用的代码笔控制宽度，以便两个文本永远不会同时出现在可见字幕中。这是通过使用jQuery将外部div的宽度绑定到内部div的宽度来实现的，并使用空白：nowrap。顺便说一句，这个密码笔不是我写的

HTML

jQuery

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

#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%);
  }
}

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