JS实现无缝隙跑马灯

<div class="marquee">
  <ul>
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
    <li>第四条消息</li>
    <li>第五条消息</li>
  </ul>
</div>

.marquee {
  overflow: hidden;
  position: relative;
}
.marquee ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  animation: marquee 10s linear infinite;
}
.marquee li {
  list-style: none;
  margin-right: 30px;
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

const marquee = document.querySelector('.marquee ul');
const marqueeItems = marquee.querySelectorAll('li');
// 将最后一个元素复制到列表的开头
marquee.insertBefore(marqueeItems[marqueeItems.length - 1].cloneNode(true), marqueeItems[0]);
// 监听动画结束并将拼接的元素移动到列表末尾
marquee.addEventListener('animationiteration', () => {
  const firstItem = marquee.querySelector('li');
  const lastItem = marquee.querySelector('li:last-of-type');
  marquee.insertBefore(lastItem.cloneNode(true), firstItem);
  marquee.removeChild(lastItem);
});