基于CSS Marquee实现两行无限滚动文本的方案求助

实现思路 #

要让第二行文本在第一行退出视口左侧时从右侧进入，核心是给第二行的滚动内容设置初始右侧偏移，同时调整动画的起止位置，保证滚动循环的连续性：

• 给第二行的内容容器设置初始偏移，让它一开始处于视口右侧外
• 调整动画的起始位置为该偏移值，结束位置保持和第一行逻辑一致（向左移动自身宽度+间隙的距离）
• 利用重复的内容容器（aria-hidden="true"的那个）实现无缝循环

修改后的完整代码 #

<div>
  <div class="marquee">
    <div class="marquee__content">
      <span>第一行滚动文本1</span>
      <span>第一行滚动文本2</span>
      <span>第一行滚动文本3</span>
    </div>
    <div aria-hidden="true" class="marquee__content">
      <span>第一行滚动文本1</span>
      <span>第一行滚动文本2</span>
      <span>第一行滚动文本3</span>
    </div>
  </div>
  
  <div class="marquee2">
    <div class="marquee__content2">
      <span>第二行滚动文本A</span>
      <span>第二行滚动文本B</span>
      <span>第二行滚动文本C</span>
    </div>
    <div aria-hidden="true" class="marquee__content2">
      <span>第二行滚动文本A</span>
      <span>第二行滚动文本B</span>
      <span>第二行滚动文本C</span>
    </div>
  </div>
</div>

<style>
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes scroll2 {
  /* 第二行动画起始位置为视口宽度，确保初始在右侧外 */
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(calc(-100% - var(--gap2)));
  }
}

.marquee {
  --gap: 0.1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  background: #222;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  animation: scroll 15s linear infinite;
}

.marquee__content > * {
  flex: 0 0 auto;
  color: white;
  text-align: center;
  padding: 0.5rem;
}

.marquee2 {
  --gap2: 0.1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap2);
  background: #333;
  margin-top: 1rem;
}

.marquee__content2 {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap2);
  /* 初始偏移到视口右侧外 */
  transform: translateX(100vw);
  animation: scroll2 15s linear infinite;
}

.marquee__content2 > * {
  flex: 0 0 auto;
  color: white;
  text-align: center;
  padding: 0.5rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
}
</style>

关键修改点 #

• 调整scroll2动画的起始值为translateX(100vw)，让第二行内容初始在视口右侧
• 给.marquee__content2设置初始transform: translateX(100vw)，保证动画启动前的位置正确
• 保持两行动画时长一致（都是15s），确保第一行退出时第二行刚好进入的同步性
• 添加背景色和示例文本方便演示，实际使用可替换为RSS内容

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