首选display: flex+双份内容实现纯css水平无限滚动，需严格匹配位移终点与原始内容总宽（含margin/padding），外层overflow: hidden，图片设flex-shrink: 0及显式宽高，动画用固定像素值translatex。
flex + 双份内容实现水平无限滚动
纯 CSS 实现稳定水平轮播，首选 display: flex + 复制内容方案。它不依赖 JS，兼容性好，且动画节奏可控——前提是位移终点必须严格等于原始内容总宽（含 margin/padding）。
- HTML 中把图片列表写两遍：
<div class="scroll-track"> <img><img><img><img><img><img> </div>（后三张是前三个的副本） - CSS 必须设
display: flex，每张图加flex-shrink: 0和显式宽高（如width: 200px; height: 120px;），否则 flex 会压缩总宽导致接缝错位 - @keyframes 终点写
transform: translateX(-640px)这类固定像素值，不能用百分比或100%；算错 1px 就会在循环点卡顿、露白 - 外层容器必须设
overflow: hidden，否则滚动过程中边缘会漏出空白或底色
scroll-snap-type 实现吸附式横向滚动
如果不需要“自动无限滚动”，而是希望用户手动滑动、每次停在一张图上，scroll-snap-type 是更轻量、更符合原生体验的方案，尤其适合移动端 H5 页面。
- 关键样式组合：
overflow-x: auto+scroll-snap-type: x mandatory+grid-auto-flow: column - 注意：必须用
overflow-x: auto，不是scroll，否则 iOS 不触发 snap 行为 -
grid-auto-flow: column是让子项按列顺序铺开的核心，漏掉它就变成默认的行排列，snap 失效 - 每个子项需设
scroll-snap-align: start，并确保宽度固定（如width: 100vw或具体像素），否则吸附位置不准
background-position 实现单图水平平铺滚动
只有一张图（比如 banner 纹理、线条背景）要无限滚动时，别用 <img>，直接走 CSS 背景方案。性能最高、缩放不撕裂、天然无缝。
- 容器设
background-image: url("strip.png")+background-repeat: repeat-x - @keyframes 动画终点必须是原图精确宽度，例如导出图是
800px宽，就得写background-position: -800px 0 - 不支持响应式图宽：如果背景图宽用了
vw或max-width，这个方案会失效 - 动画只能动 X 或 Y 轴之一；
repeat-x配background-position: -800px 0，repeat-y配0 -600px
容易被忽略的尺寸精度问题
几乎所有“滚动到一半突然空白”或“循环点闪一下”的问题，根源都在尺寸没对齐。不是动画写得不够酷，而是像素算错了。
- 图片总宽 = 所有
width+ 所有margin+ 所有gap（如果用了gap）——漏掉任意一项都会错位 - 避免用
inline-block图片，换行符会产生 4px 左右空白间隙，改用flex或float更可控 - 所有参与计算的值建议统一用 px，不用 % / rem / vw，防止小数像素四舍五入累积误差
- 用
getBoundingClientRect()在控制台手动验证实际渲染宽度，比靠经验估算靠谱得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
