如何实现多内容以Marquee效果单行依次展示且内容间带延迟？

嘿，我来帮你搞定这个需求！原生的<marquee>标签本身没法直接给第二个内容设置延迟显示，不过我们可以用两种方法来实现——一种是基于你现有的<marquee>标签配合JavaScript，另一种是用更现代的纯CSS动画（毕竟<marquee>已经被W3C标记为废弃标签了，更推荐后者）。

方案一：JavaScript + 原生Marquee标签 #

这个方案会保留你原本的<marquee>结构，通过JS延迟插入第二个内容：

<marquee direction="left" id="customMarquee">
  <label>Label 1 content here</label>
</marquee>

<script>
// 延迟2秒（2000毫秒）后添加第二个内容，可自行修改延迟时长
setTimeout(() => {
  const marquee = document.getElementById('customMarquee');
  const secondLabel = document.createElement('label');
  secondLabel.textContent = 'Label 2 content here';
  // 给两个内容之间加个空格，避免挤在一起
  marquee.appendChild(document.createTextNode(' '));
  marquee.appendChild(secondLabel);
}, 2000);
</script>

解释一下：咱先只在marquee里放第一个标签，然后用setTimeout设置延迟时间，到点了再把第二个标签插入进去，这样就能实现第二个内容延迟显示的效果。

方案二：纯CSS动画（推荐） #

因为<marquee>已经被废弃，用CSS动画不仅更灵活，还能更好地控制每个元素的滚动和延迟：

<div class="marquee-container">
  <span class="marquee-item item1">Label 1 content here</span>
  <span class="marquee-item item2">Label 2 content here</span>
</div>

<style>
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc; /* 可选，方便看容器范围 */
}

.marquee-item {
  display: inline-block;
  margin-right: 20px; /* 两个内容之间的间距，可调整 */
  animation: marquee 10s linear infinite;
}

/* 给第二个内容加延迟 */
.item2 {
  animation-delay: 3s;
  /* 延迟期间让它保持在容器外隐藏，避免一开始就显示 */
  opacity: 0;
  animation-fill-mode: forwards;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
    opacity: 1; /* 动画开始时显示内容 */
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

解释一下：

• 用一个容器装两个滚动项，通过@keyframes定义滚动动画，让元素从右侧滑到左侧。
• item2设置了animation-delay: 3s，也就是延迟3秒才开始滚动，同时用opacity:0和animation-fill-mode: forwards让它在延迟期间不显示，动画开始后再显示出来。
• 你可以调整animation里的滚动时长（比如10s）和延迟时间（3s）来适配你的需求。

内容的提问来源于stack exchange，提问作者Dennis Xavier