纯css3能实现自动轮播但无法响应点击、滑动或暂停，这是语言能力边界所致；核心是用animation+@keyframes控制ul横向位移，通过transform:translatex()触发gpu加速实现顺滑切换，配合overflow:hidden和精确关键帧达成视觉轮播效果。
纯CSS3能实现自动轮播，但无法响应点击、滑动或暂停——这是硬限制，不是写法问题。
用 animation + @keyframes 控制 ul 横向位移
核心是让所有图片并排左浮动（或 inline-block），放进一个超宽容器里，再用 animation 改变它的 transform: translateX() 或 left 值，配合 overflow: hidden 实现“切换”视觉效果。
- 容器（如
.carousel）必须设overflow: hidden，否则位移后图片全露出来 - 子容器（如
.carousel-list）宽度 = 单图宽度 × 图片张数，且需设position: relative（若用left）或保持文档流（若用transform） - 动画总时长 = 单图停留时间 × 图片张数；例如 5 张图、每张停 4s，则
animation-duration: 20s - 关键帧要精确控制：前 20% 显示第1张 → 中间 20% 过渡 → 后 20% 显示第2张……避免跳帧或卡顿
为什么推荐 transform 而非 left？
transform 触发 GPU 加速，滚动更顺滑；left 属于布局重排，尤其在旧版 Safari 或低端 Android 上易掉帧。
- 用
transform: translateX(-N%)时，百分比基于父容器宽度，不是图片自身宽度 - 若图片共 5 张，每张占 100%，则第2张对应
translateX(-100%)，第3张为-200%，以此类推 - 务必加
will-change: transform（可选），提示浏览器提前优化渲染路径
:target 方式能手动切换，但有 URL 副作用
靠锚点链接（如 #slide-2）激活 :target 伪类，再用 CSS 显示对应项。它不依赖 JS，但会改变地址栏哈希值，可能干扰路由或导致页面跳转。
- 每个轮播项需带唯一 ID，如
id="slide-3"；导航按钮 href 必须为#slide-3 -
:target只能响应一次点击，无法“回到上一张”或“循环切换”，也不支持键盘操作 - 移动端 Safari 对
:target的 scroll-behavior 支持不稳定，偶尔会强制滚动到元素顶部
真正难的不是写动画，而是处理边界：最后一张播完要不要回第一张？是否允许用户中途暂停？这些交互逻辑一旦出现，CSS 就必须让位给 JS —— 不是技术不行，是语言能力边界所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
