纯 css 水平无限滚动轮播需用 flex 布局避免空白间隙，子项设 flex-shrink: 0 和显式 width，父容器 overflow: hidden，@keyframes translatex 终点须等于原始总宽（如 3×200px=−600px），双份内容位移仍按单份计算，悬停暂停必须直接作用于动画元素 .slides。
纯 CSS 实现的水平无限滚动轮播，只要 HTML 结构和动画位移值对齐真实内容宽度，就能稳定运行，不依赖 JS、无闪烁、兼容现代浏览器。
为什么用 display: flex 而不是 inline-block 或 float
flex 布局能天然规避换行符/空格产生的间隙问题；inline-block 必须手动清除空白字符（如注释掉换行或设 font-size: 0），否则图片间会多出 4px 左右间隙，导致总宽计算偏差。flex 下只需统一设 flex-shrink: 0 和固定宽高，所有子项严格并排，宽度可预测。
- 每张图建议显式设置
width（如200px），避免百分比或auto在缩放时四舍五入错位 - 父容器必须设
overflow: hidden，否则滚动末尾会露出背景色或空白 - 不要混用
margin或gap，它们会加入总宽计算，但动画位移常被忽略
@keyframes 里 translateX 的终点必须等于原始总宽
假设有 3 张图，每张 200px，原始总宽就是 600px。动画终点必须是 transform: translateX(-600px)，不能写成 -100% 或估算值。否则动画重置瞬间会出现跳变或卡顿。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若用响应式单位（如
vw），需确保父容器宽度固定或用 JS 动态注入变量——纯 CSS 场景下推荐像素固定 - 双份内容结构（即复制一遍图片）时，动画位移仍只按「原始一份」宽度计算，不是两份
- 用
calc()计算总宽要谨慎：比如width: calc(200px * 3)可行，但calc(100% - 20px)易受父级 padding 影响
鼠标悬停暂停必须加在容器上，且用 animation-play-state
直接给滚动内层元素加 :hover 会失效，因为动画作用在父级 .slides 上。暂停逻辑只能挂载到承载动画的元素本身。
- 正确写法：
.slides:hover { animation-play-state: paused; } - 别写成
.carousel:hover .slides—— 多一层选择器可能因重绘延迟导致暂停滞后 - 如果同时支持触摸设备，需额外加
@media (hover: none)降级处理，否则悬停逻辑在手机上无意义
最容易被忽略的是图片加载时机：若图片异步加载完成晚于动画启动，初始帧可能空白或错位。稳妥做法是给 img 加 loading="eager"，或用 opacity: 0; transition: opacity 0.3s; 配合 load 事件渐显，但这就超出纯 CSS 范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
