纯CSS轮播可用input[type="radio"]配合:checked实现显隐切换，或用transform:translateX()加animation实现滑动效果，需注意容器溢出隐藏、图片尺寸控制及用户交互暂停动画。
用 input[type="radio"] 做纯 CSS 轮播，不依赖 JS
能不用 JS 就不用——只要轮播逻辑简单（自动+手动切换、无过渡动画要求），input[type="radio"] 配合 :checked 伪类是最轻量、最可靠的方式。浏览器兼容性好（IE9+），无加载延迟，也不存在 JS 执行失败导致轮播卡死的问题。
关键点在于：每个 input 控制一张图的显隐，用相邻兄弟选择器 ~ 或直接兄弟选择器 + 触发对应 img 或 section 的显示状态。
- 所有
input必须同级、有相同name（如name="slide"），才能互斥选中 - 对应的图片/内容块必须紧跟在对应
input后面，或通过~向后匹配到（但不能跨父容器） - 默认第一张图要显示，所以第一个
input加checked属性，且对应内容块的初始opacity或z-index要设为可见状态
transform: translateX() + transition 实现平滑位移
如果想让轮播有左右滑动效果（而非闪现），就得放弃纯显隐，改用位移。核心是把所有幻灯片放在同一行内，用 transform: translateX(-N%) 移动容器，每次移动一个 100% 宽度。
注意：必须给外层加 overflow: hidden，否则会看到溢出内容；同时所有子项需设 flex-shrink: 0（若用 flex）或 float: left（若用浮动），防止被压缩。
立即学习“前端免费学习笔记（深入）”；
- 每张图宽度必须严格等于父容器宽度（如
width: 100%），否则位移计算会错位 -
transition要写在被位移的容器上（不是单张图），否则动画不连贯 - 用
translateX()比left性能更好，避免重排
自动轮播靠 @keyframes + animation，但别忘了用户交互暂停
纯 CSS 自动轮播可用 @keyframes 控制 translateX 的关键帧，再用 animation 循环播放。但有个硬伤：用户点击导航按钮时，动画不会自动暂停，会导致位移错乱。
解决办法是监听用户操作，用 :hover 或 :focus-within 临时暂停动画。例如给整个轮播容器加 animation-play-state: paused，并在 :hover 时恢复：
.carousel {
animation: slide 8s infinite;
}
.carousel:hover {
animation-play-state: paused;
}
-
animation-timing-function推荐用steps(3, end)（假设有 3 张图），比ease更精准控制停顿点 - 移动端没有
:hover，得额外用:focus-within或 JS 补充暂停逻辑 - 不要用
setInterval模拟自动轮播——那已经不是纯 CSS 方案了
响应式轮播必须重设 translateX 百分比和容器宽度
轮播图在手机上变窄，但 translateX(-100%) 仍按当前容器宽度计算，这点没问题；真正容易翻车的是图片本身——如果图宽设成 100vw 或固定像素，缩放后可能拉伸或留白。
- 图片统一用
width: 100%; height: auto;，并包裹在overflow: hidden的容器里 - 轮播容器高度建议用
aspect-ratio（如aspect-ratio: 16/9）或padding-top百分比技巧，避免高度塌陷 - 小屏下可减少动画时长（如从
8s改为5s），提升感知流畅度
轮播看似简单，但最常出问题的不是切换逻辑，而是图片尺寸失控和动画与用户操作的竞态。先保内容正确显示，再加动效，比一上来就堆 transition 更稳妥。
