如何用纯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 更高效
