纯 css 移动端无缝轮播需满足：overflow: hidden 容器 + transform: translatex 动画 + 图片复制逻辑三者对齐；关键在用 flex 布局（flex: 0 0 100%）配合百分比位移（如 4 张图用 -300%），禁用 width: 100% 等硬编码，改用 aspect-ratio 和 object-fit 保形，触控暂停纯 css 下推荐 :focus-within 或 prefers-reduced-motion 降级。
纯 CSS 实现移动端无缝轮播图，关键不在“能不能”，而在于「overflow: hidden 容器 + transform: translateX 动画 + 图片复制逻辑」这三者是否对齐了视口、内容宽度与动画终点。否则在 iPhone SE 和 iPad Pro 上，要么卡顿回跳，要么留白或溢出。
为什么 width: 100% 不等于「自适应」
直接给轮播容器设 width: 100% 只解决了水平占满，但没解决：图片宽高比随屏幕缩放失真、动画位移值写死导致不同设备切换步长不一致、flex 子项在小屏被压缩变形等问题。
- 用
aspect-ratio: 16 / 9锁定容器高宽比（现代浏览器支持），避免靠 JS 或媒体查询硬切高度 - 图片必须用
object-fit: cover+width: 100%; height: 100%，禁用height: auto（它会让 flex 布局塌陷） - 不要用
vw写死动画位移，比如translateX(-100vw)—— 容器有 padding 或 border 时会偏移不准
@keyframes 里用百分比位移必须匹配内容总宽
无缝的核心是让动画终点恰好等于「单张图宽度 × 图片数量」，而这个值不能写死像素。一旦你复制了 5 张图，又用 flex 布局，那总宽就是 500%（每张占 100%），动画从 0% 到 -400% 才能平滑滚完一轮并衔接首张。
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
- 推荐结构：
.slider-list设display: flex，子项.slide设flex: 0 0 100%（即不伸缩、不收缩、固定占满容器宽） - 动画终点必须是
translateX(-<strong>n</strong>00%)，其中 n = 图片张数 − 1；例如 4 张图 →-300% - 若用
calc()算单图宽（如width: calc((100% - 60px) / 4)），要同步更新动画终点为translateX(calc(-3 * ((100% - 60px) / 4) - 45px))，极易出错，不建议
移动端触摸暂停必须靠 animation-play-state，不是 pointer-events
用户手指一碰就停，松开继续——这个交互不能靠禁用事件或加遮罩层，否则会打断滚动惯性，且 iOS Safari 对 pointer-events: none 在 transform 元素上行为不一致。
- 给轮播容器加
animation-play-state: paused的 hover/focus/active 状态即可，但注意：移动端没有:hover，得靠:active+touch-action: manipulation - 更可靠的做法是监听
touchstart和touchend，用 class 切换控制animation-play-state，但这就引入了 JS；纯 CSS 下只能退而求其次：用:focus-within配合可聚焦的label或按钮 - 真正零 JS 的方案：放弃「触控暂停」，改用
prefers-reduced-motion媒体查询降级动画，对可访问性更友好
最易被忽略的一点：iOS Safari 对 will-change: transform 的触发非常敏感，加在轮播容器上可能引发闪屏或渲染撕裂；应只加在动画元素（如 .slider-list）上，且仅当动画运行中才添加该声明——这又回到了需要 JS 控制 class 的现实。纯 CSS 方案里，宁可牺牲一点性能提示，也别乱加 will-change。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
