当为多个并列的 .work_banner_content 元素设置水平滚动动画时，若仅对父容器 .work-banner 应用 overflow: hidden 而未正确分配动画目标，第二组内容虽在 DOM 中存在且参与动画，却因渲染层级或裁剪逻辑无法可见。核心解法是将动画直接绑定到每个子列表元素上。
当为多个并列的 `.work_banner_content` 元素设置水平滚动动画时，若仅对父容器 `.work-banner` 应用 `overflow: hidden` 而未正确分配动画目标，第二组内容虽在 dom 中存在且参与动画，却因渲染层级或裁剪逻辑无法可见。核心解法是将动画直接绑定到每个子列表元素上。
实现无缝横向跑马灯（Marquee）效果时，常见误区是将 @keyframes 动画应用在父容器 .work-banner 上，同时又对其设置 overflow: hidden —— 这会导致所有超出父容器宽度的子内容（包括正在移入视口的第二组）被统一裁剪，即使它们正通过 translateX() 动画进入可视区域，也无法突破父级的溢出限制。
正确做法是：让每一组 ，而父容器 .work-banner 仅作为布局容器（保持 display: flex 和 gap），不参与位移变换。这样每组内容可自主完成“从右向左滑入 → 完全展示 → 滑出”的完整周期，彼此不受干扰。
以下是优化后的关键 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; /* ✅ 动画直接作用于每个 ul */
}
.work_banner_content li {
width: 12.5%; /* 8项均分，适配 flex 布局 */
}
@keyframes test {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap))); /* 向左移动一整组 + 间距，实现无缝衔接 */
}
}
⚠️ 注意事项：
- 避免重复写 -webkit-transform：现代浏览器已普遍支持标准 transform，仅保留 transform 即可，提升可维护性；
-
min-width: 100% 是关键：确保每组
- 的自然宽度不小于容器，否则 translateX(-100%) 将无法触发明显位移；
- flex-shrink: 0 不可省略：防止 Flex 布局在空间不足时压缩子元素，破坏滚动基准；
- 若需更平滑效果，可添加 will-change: transform 到 .work_banner_content 提升动画性能（尤其在低端设备）；
- 如后续需支持 RTL（从右向左）滚动，只需将 from/to 的 translateX 值对调，并调整 direction: rtl 与 text-align 配合。
该方案无需修改 HTML 结构，兼容性强，且逻辑清晰——让动画主体即渲染主体，从根本上规避了父级 overflow: hidden 与子元素动画之间的冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
