CSS Marquee 双组无缝滚动实现方法

本文揭秘了CSS Marquee双组无缝滚动失效的根源——当动画错误地绑定在设置了`overflow: hidden`的父容器上时，第二组内容虽在移动却惨遭裁剪；真正有效的解法是将`@keyframes`动画直接赋予每个`.work_banner_content`子元素，配合`min-width: 100%`、`flex-shrink: 0`及精准的`translateX(calc(-100% - var(--gap)))`位移计算，让两组内容独立、平滑、无断点地交替滑入视口，实现零JS、高性能、跨浏览器兼容的真·无缝滚动效果，堪称现代CSS跑马灯实践的底层通关密钥。

本文解决 CSS Marquee 中第二组内容不可见的问题：根本原因是 overflow: hidden 作用于父容器，而动画却未应用在可滚动的子元素上；正确做法是将 @keyframes 动画直接绑定到每个 .work_banner_content 元素，而非父容器。

本文解决 CSS Marquee 中第二组内容不可见的问题：根本原因是 `overflow: hidden` 作用于父容器，而动画却未应用在可滚动的子元素上；正确做法是将 `@keyframes` 动画直接绑定到每个 `.work_banner_content` 元素，而非父容器。

在实现水平无限滚动（marquee）效果时，常见策略是使用两组相同内容并排排列，通过 translateX 动画让它们连续向左平移，从而营造无缝循环效果。但许多开发者会误将动画添加到父容器（如 .work-banner）上，导致实际问题：第二组内容虽在 DOM 中存在、也在动画中移动，却因父容器设置了 overflow: hidden 而被裁剪不可见。

关键在于理解 CSS 动画的“作用域”与 overflow 的裁剪边界关系：

• 当 animation 应用于 .work-banner（父容器），其子元素 .work_banner_content 的位移是相对于父容器定位的；
• 但 overflow: hidden 也作用于该父容器，因此任何超出其宽高的子元素部分（包括正在移入视口的第二组）都会被立即隐藏；
• 正确解法是将动画委托给每个 .work_banner_content 自身——这样每组独立执行 translateX，且因它们是 flex 子项、flex-shrink: 0、min-width: 100%，能完整保留在布局流中，动画过程自然跨越父容器边界，实现视觉上的连续滚动。

以下是修正后的核心 CSS 片段：

.work-banner {
  margin-top: 10px;
  border-top: solid black;
  height: 30px;
  width: 100%;
  --gap: 1rem;
  display: flex;
  overflow: hidden; /* ✅ 仍需保留，防止意外溢出 */
  gap: var(--gap);
}

.work_banner_content {
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%; /* ✅ 确保单组宽度 ≥ 容器宽度 */
  gap: var(--gap);
  animation: test 15s linear infinite; /* ✅ 动画绑定在此处，而非 .work-banner */
}

.work_banner_content li {
  width: 12.5%; /* 8 项均分，适配 100% 宽度 */
}

@keyframes test {
  from {
    transform: translateX(0); /* 推荐移除 -webkit- 前缀，现代浏览器已原生支持 */
  }
  to {
    transform: translateX(calc(-100% - var(--gap))); /* 向左移动一整组 + 间隙，确保完全退出并触发第二组入场 */
  }
}

⚠️ 注意事项：

• 避免重复前缀：-webkit-transform 仅在极旧版本 Safari/Android Browser 中必要，当前主流浏览器（Chrome 36+、Firefox 16+、Safari 9+）均支持无前缀 transform；
• min-width: 100% 是关键：它确保每组 .work_banner_content 至少撑满容器宽度，为平移提供足够空间；
• gap 需参与计算：calc(-100% - var(--gap)) 中减去 --gap 是为了精确对齐两组之间的间距，否则会出现视觉断点；
• 性能优化建议：若内容较多，可添加 will-change: transform 到 .work_banner_content，提示浏览器启用 GPU 加速（但勿滥用）。

总结：Marquee 的本质是「视觉欺骗」，依赖两组内容交替进出视口。成功的前提是——动画必须施加在内容容器自身，而非其父裁剪容器。这一原则同样适用于 banner、ticker、新闻跑马灯等场景，是构建高性能、可维护 CSS 滚动效果的基础实践。

好了，本文到此结束，带大家了解了《CSS Marquee 双组无缝滚动实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！