本文解决 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 滚动效果的基础实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
