能，但必须用 opacity + visibility + transition 配合 position: absolute；单靠 display 切换会闪、无过渡、不支持淡入淡出，因其不可动画且引发重排重绘。
能，但必须用 opacity + visibility + transition 配合 position: absolute，单靠 display 切换会闪、无过渡、不支持淡入淡出。
为什么不能只用 display: none/block 堆叠切换
所有幻灯片用 position: absolute 叠在同一个位置，初始都设 display: block，再靠 JS 或伪类切 display —— 这样会导致：浏览器强制重排重绘，动画卡顿；display 本身不可动画，transition 对它完全无效；切换瞬间“消失→出现”，没有视觉缓冲，像 PPT 翻页一样生硬。
必须换用可过渡的属性：opacity 控制透明度，visibility 配合防止点击穿透（比如按钮被底下幻灯片截获），再加 transition 统一控制时长和缓动。
常见错误写法：.slide { display: none; } .slide.active { display: block; } —— 这段 CSS 写了等于没写动画效果。
立即学习“前端免费学习笔记（深入）”；
position: absolute 堆叠时的容器必须设 position: relative
否则所有 absolute 子元素会相对于 body 定位，一旦页面滚动或缩放，幻灯片就飘走。
正确做法：
- 外层容器（如
.slideshow）必须有position: relative - 每个
.slide设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 别漏掉
box-sizing: border-box，避免 padding/margin 导致尺寸溢出
如果容器用了 transform、filter 或 opacity < 1，也会创建新层叠上下文，可能干扰 z-index 顺序 —— 此时要显式加 z-index 并确保值递增。
如何用 :checked + ~ 实现纯 CSS 切换（无 JS）
核心是让 radio 控制 opacity/visibility，而不是 display。
关键 CSS 规则：
.slide { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }
input[name="slide"]:checked ~ .slide { opacity: 1; visibility: visible; }
.slide:first-child { opacity: 1; visibility: visible; }
注意点：
- 所有
<input type="radio">必须同name（如name="slide"），否则无法互斥 -
~是通用兄弟选择器，要求 radio 和 .slide 在 DOM 中同级且 radio 在前；不要用+（相邻兄弟），容错性差 - 必须给
.slide设初始opacity: 0，否则第一张不会自动显示（因为 :checked ~ .slide 不匹配自己） - 如果用
label包裹 radio，确保for属性指向 radio 的id，否则点击无效
移动端点击区域小、切换延迟？加 will-change: opacity 和 touch-action: manipulation
iOS Safari 和部分安卓浏览器对 opacity 动画优化不足，快速连点可能丢帧或延迟响应。
补救措施：
- 给
.slide加will-change: opacity（仅在动画期间启用，避免常驻导致内存开销） - 给触发切换的
label或按钮加touch-action: manipulation，减少 300ms 点击延迟 - 避免在
.slide内放大量未懒加载的图片 —— opacity 变化时，浏览器仍会解码并绘制全部内容，卡顿明显
真正难调的不是定位或切换逻辑，而是 opacity 过渡在低端机上掉帧、以及 visibility 隐藏后仍参与可访问性树（屏幕阅读器可能读出所有 slide）。如果需要兼顾 a11y，得配合 aria-hidden 手动同步更新。
