纯css幻灯片无需js因浏览器原生支持:checked伪类与~兄弟选择器，配合transform或opacity可触发显隐/位移；需同名name确保单选互斥，label显式for绑定，input用绝对定位隐藏保可访问性。
纯CSS幻灯片为什么不用JS就能动
因为浏览器原生支持 :checked 伪类 + ~ 兄弟选择器，配合 @keyframes 或定位控制，就能触发显隐或位移。不是“黑科技”，是标准语法被低估了——只要结构对、选择器准，input[type="radio"] 一选中，后面所有关联的 .slide 就能响应。
关键不在“炫”，而在“可控”：没有JS加载延迟，不阻塞渲染，SEO友好，键盘Tab也能切，屏幕阅读器能感知状态。
- 必须用同名
name的input[type="radio"]，否则互斥失效 -
label必须显式绑定for属性，不能只靠嵌套 - 别把
input设成display: none，改用position: absolute; left: -9999px保可访问性
animation自动轮播的坑：为什么图片卡住不动
常见现象是动画跑一次就停，或切换时闪一下、跳一帧。根本原因通常是 @keyframes 关键帧节点没对齐，或 animation-duration 和图片数量没匹配。
比如4张图，总周期设为12s，那每张停留时间就是3s，关键帧就得按 0% → 25% → 25.1% → 50% … 这样分段。漏掉 0.1% 的硬切点，浏览器就会用 ease 插值补间，看起来像卡顿。
- 务必加
animation-iteration-count: infinite，否则默认只播一次 - 禁用
animation-timing-function: ease，改用steps(1, end)或linear - 如果用
transform: translateX()滑动，父容器宽度要设为N * 100%（N是图数），且子项width: 100%
移动端滑动比透明度切换更稳的原因
iOS Safari 对 opacity 动画偶发渲染残留（白边、闪帧），尤其在低亮度或快速切换时。这不是bug，是WebKit合成层处理透明度的已知限制。
用 transform: translateX() 能绕过这个问题：它触发GPU加速，不触发布局重排，帧率更稳，功耗更低。但要注意，必须加 will-change: transform 提前告知浏览器，否则首次动画可能掉帧。
- 不要混用
opacity和transform做复合动画（比如“淡入+滑动”），节奏难同步，易错层 -
translateX(-200%)表示显示第3张（索引从0开始），不是百分比数值本身 - 若需默认显示第2张，直接给第2个
input加checked属性即可
为什么radio比button更适合做手动切换锚点
因为 input[type="radio"] 天然具备状态管理能力：互斥、可聚焦、支持空格键切换、无需防抖、不抢焦点、无障碍API完备。而用 button + JS 监听，你得自己维护当前激活态、处理键盘事件、防止连点、兼容屏幕阅读器……全是重复劳动。
结构上，每个 input 放在对应 .slide 前面，靠 :checked ~ .slide 选择器驱动样式，逻辑干净到近乎“声明式”。
-
label必须设cursor: pointer或display: block，否则点击热区不明确 - 导航点（dots）建议也用
label实现，复用同一套for绑定逻辑 - 如果幻灯片超过6张，CSS会变冗长，此时该考虑JS方案——不是技术退步，是权衡可维护性
真正容易被忽略的，是 z-index 和 position: absolute 的组合必须严格一致：所有 .slide 要在同一 stacking context 下叠放，否则 :checked ~ .slide 可能失效；而 overflow: hidden 必须作用在直接父容器上，漏一层就露边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
