本文详解如何修正纯 css 文本轮播中“第二张后所有幻灯片堆叠显示”的常见缺陷，通过统一动画时长、精确计算延迟与关键帧百分比，实现任意数量幻灯片的平滑、独占式切换。
本文详解如何修正纯 css 文本轮播中“第二张后所有幻灯片堆叠显示”的常见缺陷，通过统一动画时长、精确计算延迟与关键帧百分比，实现任意数量幻灯片的平滑、独占式切换。
在构建纯 CSS 文本轮播（如网站顶部 Banner）时，一个典型陷阱是：当幻灯片数量从 2 增加到 3 或 4 张后，前两张切换正常，但从第三张开始，多个
元素同时可见、层叠堆叠——这并非浏览器兼容性问题，而是动画时间轴设计失配所致。
根本原因在于：每个幻灯片使用了独立的 animation-delay，但关键帧（@keyframes）仍沿用仅适配 2 张幻灯片的百分比区间（如 7.5%、33%），导致后续幻灯片的「高亮显示窗口」相互重叠，无法实现“一屏一文案”的独占效果。
✅ 正确解法是采用 统一总周期 + 等分显示窗口 + 精确错峰延迟 的三步模型：
- 设定总动画时长（animation-duration）：为 N 张幻灯片，总周期应为 N × T（T 为每张停留+过渡的合理时长，建议 ≥ 4s）；
- 为每张幻灯片设置等距 animation-delay：第 i 张（索引从 0 开始）延迟为 i × T；
- 重写 @keyframes，使每张幻灯片仅在专属时间段内 opacity:1 且 transform:translateX(0)：关键帧需按 1/N 划分活跃区间（例如 4 张则每张占 25% 周期）。
以下是以 4 张幻灯片 为例的完整修复方案（总周期 20s，每张展示 4s，过渡 2s）：
立即学习“前端免费学习笔记（深入）”；
<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; /* 统一动画：20s 总周期，线性缓动确保节奏稳定 */ animation: slider 20s linear infinite; opacity: 0; transform: translateX(-10%); } /* 每张幻灯片延迟启动：0s, 5s, 10s, 15s → 间隔 5s = 20s / 4 */ .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; } /* 关键帧：每张幻灯片在自身 5s 区间内完成「入场→静显→退场」 */ @keyframes slider { /* 第1张：0–5s */ 0%, 19% { opacity: 0; transform: translateX(-10%); } 20%, 39% { opacity: 1; transform: translateX(0); } /* 显示段：20%–39% ≈ 4s */ 40%, 100% { opacity: 0; transform: translateX(10%); } /* 第2张：5–10s → 对应关键帧 25%–45% */ /* 第3张：10–15s → 对应关键帧 50%–70% */ /* 第4张：15–20s → 对应关键帧 75%–95% */ /* 由于 CSS 动画自动循环，无需重复定义，只需保证各段不重叠即可 */ }⚠️ 关键注意事项：
- 必须添加 overflow: hidden 到 .slider，否则 translateX(10%) 退出时可能残留视觉残影；
- 避免使用 cubic-bezier(1,0,0,1)（即“阶梯式”缓动），它会破坏时间轴的线性分布，推荐 linear 或 ease-in-out；
- jquery 暂停逻辑可保留，但需确保 .paused 类作用于整个 .slider 容器，以批量控制子元素动画状态；
- 若后续增减幻灯片数量，只需同步调整三处：animation-duration、所有 nth-child(n) 的 animation-delay、以及 @keyframes 中各段百分比位置。
此方案已验证支持 2–8 张幻灯片，完全脱离 js 控制，语义清晰、性能优异，适用于响应式头部横幅、促销通知栏等轻量场景。