当为包含多组内容的 marquee 容器设置 overflow: hidden 时，若仅对父容器应用位移动画，子元素超出视口部分将被裁剪不可见；正确做法是将动画直接绑定到每个 .work_banner_content 子元素上，使其独立平移，从而实现无缝循环滚动效果。
当为包含多组内容的 marquee 容器设置 `overflow: hidden` 时，若仅对父容器应用位移动画，子元素超出视口部分将被裁剪不可见；正确做法是将动画直接绑定到每个 `.work_banner_content` 子元素上，使其独立平移，从而实现无缝循环滚动效果。
在构建 CSS 驱动的横向 marquee（跑马灯）效果时，一个常见误区是将 @keyframes 动画应用在父容器（如 .work-banner）上，而内容实际由多个并列的
- 元素组成。这种结构下，父容器设置了 overflow: hidden 以隐藏溢出内容，但若动画作用于父级，所有子元素会整体位移——导致第二组内容虽在 DOM 中存在、也在动画中移动，却因父容器的裁剪边界而始终不可见。
根本原因在于：
overflow: hidden 会严格限制其直接子元素的渲染区域。当动画 applied to .work-banner 时，两个
- 始终处于同一层叠上下文和布局流中，它们共同构成父容器的内容盒；translateX() 移动的是整个父盒，而非各子项的相对位置，因此第二组无法“接续”第一组进入可视区。
✅ 解决方案：动画下沉至每个 .work_banner_content 元素
将 animation: test 15s linear infinite 直接添加到 .work_banner_content 类上，使每组
- 独立执行相同动画。由于两组宽度均为 min-width: 100%（配合 flex-shrink: 0 防收缩），且通过 gap 分隔，它们会在父容器内水平排列，并各自从起始位置向左平移 100% + gap 的距离——当第一组完全移出左边界时，第二组恰好完全移入右边界，形成视觉上的无缝循环。
以下是关键修复后的完整代码示例：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.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_content li {
width: 12.5%; /* 8项均分，适配 flex layout */
}
@keyframes test {
from {
transform: translateX(0); /* 推荐使用标准 transform，移除 -webkit- 前缀（现代浏览器已原生支持） */
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
<div class="work-banner">
<ul class="work_banner_content">
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
</ul>
<ul class="work_banner_content">
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
<li>Work ·</li>
</ul>
</div>
? 注意事项：
- 务必为 .work_banner_content 设置 flex-shrink: 0，否则在窄屏下可能被压缩，破坏 min-width: 100% 的预期行为；
- calc(-100% - var(--gap)) 中的 --gap 必须与父容器的 gap 一致，否则两组之间会出现错位或间隙不匹配；
- 如需更长停留时间或更慢滚动，可延长 animation-duration（如 25s），无需修改关键帧逻辑；
- 若后续需支持 RTL（从右向左滚动），只需将 from/to 的 translateX 值对调，并添加 direction: rtl 或使用 transform: scaleX(-1) 配合子元素翻转。
该方案保持 HTML 结构简洁、CSS 可维护性强，且完全基于标准属性，兼容所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
