如何用纯CSS实现一个简单的图片幻灯片切换效果

纯CSS幻灯片需用@keyframes配合opacity与z-index实现图片轮播，关键在于精确计算animation-delay、animation-duration及关键帧百分比，避免JS依赖但需接受无交互限制。

用 @keyframes 控制图片显隐，别碰 JavaScript

纯 CSS 幻灯片本质是靠定时切换 opacity 或 visibility，配合 animation 驱动。关键不是“怎么动”，而是“怎么让每张图在正确时间显示”。常见错误是直接对 img 元素设动画，结果所有图一起淡入淡出——必须用绝对定位叠在一起，再逐个控制。

推荐用 opacity + z-index 组合：显隐靠 opacity，层级靠 z-index 动态调整，避免闪烁或错层。

• 所有 img 必须包裹在同一个容器里，且设 position: relative
• 每个 img 设 position: absolute; top: 0; left: 0;，保证重叠
• 动画时长要包含“显示时长 + 切换时长”，比如 4s 显示 + 1s 淡出 = 总周期 5s

animation-delay 是多图轮播的核心，不是可选项

没有 animation-delay，所有图会同时开始动画，根本切不了。每张图的 animation-delay 值必须按顺序递增，步长等于单张图的停留时间。比如 3 张图、每张停 4s，那延迟分别是 0s、4s、8s，动画总周期就得设成 12s（3 × 4s）。

容易漏掉的是：延迟值必须和 @keyframes 中的关键帧时间点严格对应。例如，第 2 张图从第 4s 开始显示，那它的 @keyframes 就得从 33%（≈4/12）开始定义不透明度变化。

立即学习“前端免费学习笔记（深入）”；

• 动画总时长 animation-duration = 图片数 × 单图停留时间
• 每张图的 animation-delay = 图片索引 × 单图停留时间（索引从 0 开始）
• 如果加了淡入淡出过渡，关键帧百分比要预留过渡区间，比如 0% → 10%: opacity 0，10% → 30%: opacity 1，30% → 40%: opacity 0

IE 和旧版 Safari 不支持 animation-fill-mode: forwards，得手动补兼容

现代浏览器里用 animation-fill-mode: forwards 能让最后一帧保持，但 IE10/11 和 Safari ≤ 9 会忽略它，导致最后一张图闪回第一张。解决办法是：不用 forwards，改用 opacity 关键帧把最后一段设为固定值，并确保总周期结束时状态正确。

更稳妥的做法是，在最后一张图的动画末尾多留一段“静止期”，比如 12s 总周期里，最后 1s 不做任何变化，只维持 opacity: 1。这样即使动画重播，视觉上也不会跳。

• 避免依赖 forwards，尤其当目标用户含企业内网 IE 用户时
• 用 opacity 替代 visibility，因为后者无法过渡，硬切会闪
• 测试时打开 DevTools 的“Rendering”面板，勾选“FPS meter”，看动画是否掉帧——CSS 动画卡顿通常是因为触发了重排（layout），确保没改 width/height 等布局属性

移动端 touch 交互没法用纯 CSS 实现，别硬凑

纯 CSS 只能做自动轮播。想加手势滑动、暂停、点选下一张？这些必须用 JS 监听 touchstart/touchend，然后动态改 animation-play-state 或切换 class。强行用 :hover 模拟点击，在 iOS 上基本失效——Safari 对非链接/按钮元素的 :hover 支持极弱，且不会响应 touch。

如果项目明确要求“零 JS”，那就接受它只能自动播、不能交互；如果需要控制，老老实实加几行 JS，别为了“纯 CSS”牺牲体验。

• animation-play-state: paused 可以暂停，但触发它必须靠 JS 或 :hover（后者移动端无效）
• 用 pointer-events: none 关掉幻灯片容器的事件捕获，防止遮挡底层内容，这是常被忽略的细节
• 图片多于 5 张时，CSS 动画性能会明显下降，建议改用 transform: translateX() 配合 will-change，比 opacity 更高效

实际运行中，最常卡住的地方不是写法，而是时间轴算错——延迟、持续、关键帧百分比三者对不上，图就乱跳。调的时候打开浏览器开发者工具的动画检查器，逐帧拖动看每张图的 opacity 变化是否符合预期，比反复刷新快得多。