本文详解如何修复纯 css 文本轮播中“第二张之后所有幻灯片重叠显示”的常见问题，通过同步调整动画总时长、延迟时间与关键帧百分比，实现任意数量幻灯片的平滑、独占式切换。
本文详解如何修复纯 css 文本轮播中“第二张之后所有幻灯片重叠显示”的常见问题，通过同步调整动画总时长、延迟时间与关键帧百分比，实现任意数量幻灯片的平滑、独占式切换。
在构建纯 CSS 文本轮播（如网站顶部公告栏）时，一个典型陷阱是：当幻灯片数量从 2 增加到 3 或 4 张后，前两张切换正常，但从第三张开始，多个
元素同时可见、层叠堆叠——这并非浏览器兼容性问题，而是动画周期、延迟与关键帧未协同缩放导致的逻辑冲突。
根本原因在于：原代码中 animation: slider 16s ... 总时长固定为 16s，但 nth-child(3) 和 nth-child(4) 的 animation-delay 分别设为 12s 和 16s，而关键帧 @keyframes slider 中的活跃区间（如 7.5%–33% 对应约 1.2s–5.3s）仍按 2 张幻灯片的节奏设计。结果是：第 3 张在 12s 进入时，第 1 张尚未完成整个 16s 周期，其动画仍在循环；叠加绝对定位 + position: absolute，多个元素便在同一时刻处于 opacity: 1 状态，视觉上“合并”。
✅ 正确解法：三要素统一缩放
对 N 张幻灯片，需同步调整：
- 总动画时长：T = N × t_per_slide（建议每张展示 ≥ 4s，过渡 ≥ 1s，即 t_per_slide ≥ 5s）
- 各幻灯片延迟：delay_i = (i − 1) × t_per_slide（i 从 1 开始）
- 关键帧百分比：将活跃显示区间（opacity: 1 + transform: translateX(0)）映射到每张幻灯片对应的「黄金时段」
以 4 张幻灯片、每张展示 5s（含 1s 过渡）→ 总周期 20s 为例，修正后的完整代码如下：
<div class="slider"> <p class="slide">30% to 60% off Sitewide | Extra 30% off Sale</p> <p class="slide">20% off Refer a Friend</p> <p class="slide">Extra 10% off on Prepaid Orders</p> <p class="slide">Clearance Sale is LIVE</p> </div>
.slider {
position: relative;
height: 40px;
padding: 0 10px;
background: #000;
color: #fff;
font-size: 13px;
overflow: hidden; /* 关键：隐藏溢出，避免短暂双显 */
}
.slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
line-height: 40px;
animation: slider 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
opacity: 0;
}
/* 每张幻灯片延迟：0s, 5s, 10s, 15s */
.slider .slide:nth-child(1) { animation-delay: 0s; }
.slider .slide:nth-child(2) { animation-delay: 5s; }
.slider .slide:nth-child(3) { animation-delay: 10s; }
.slider .slide:nth-child(4) { animation-delay: 15s; }
@keyframes slider {
/* 隐藏态 → 进入 → 完全显示 → 退出 → 隐藏态 */
0%, 5% { opacity: 0; transform: translateX(-10%); }
10%, 30% { opacity: 1; transform: translateX(0); } /* 展示主区间：2s+ */
35%, 40% { opacity: 0; transform: translateX(10%); }
45%, 100% { opacity: 0; transform: translateX(10%); } /* 保持隐藏至周期结束 */
}? 关键优化说明：
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden 加在 .slider 上，防止过渡末尾出现轻微重叠；
- 关键帧中 10%–30%（即 2s–6s）确保每张幻灯片有 ≥4s 清晰展示期；
- 使用 cubic-bezier(0.4, 0, 0.2, 1) 替代原 cubic-bezier(1,0,0,1)，获得更自然的缓动效果（原值易导致突兀跳变）；
- 所有幻灯片 left: 0; width: 100% 显式声明，消除因默认 inline 行内行为引发的微小偏移。
? 扩展建议：
- 若需支持动态增删幻灯片，推荐用 CSS 自定义属性（--slide-count: 4）配合 calc() 计算延迟与关键帧，或改用 JavaScript 控制类名；
- 移动端需添加 white-space: nowrap; overflow-x: hidden; 防止长文本换行破坏布局；
- 暂停交互保留原 jQuery 写法即可，但建议升级为原生 addEventListener('mouseenter') 提升性能。
遵循「周期-延迟-关键帧」三者线性同步原则，无论 2 张还是 10 张幻灯片，均可实现精准、稳定、无重叠的 CSS 文本轮播。
