纯CSS图片无缝滚动核心是复制内容+精确位移+容器裁剪；width: 200%仅适用于固定等宽图，响应式下需用calc()动态计算总宽，配合--count变量与--gap间距，并以transform: translateX(-50%)实现双组内容对齐，禁用left避免重排，overflow: hidden严防裁剪缝。
纯CSS实现图片无缝滚动展示墙，核心是「复制内容 + 精确动画位移 + 容器裁剪」，不依赖JS就能跑得稳，但宽度计算、动画时长和克隆逻辑稍有偏差就会露白边或卡顿。
为什么width: 200%不是万能解？
很多教程直接让.slider-container设为width: 200%，前提是图片数量固定且等宽。一旦图片宽高比不一、或用flex自动分配空间，实际总宽度会偏离预期——尤其在响应式场景下，calc()算出来的单图宽度可能因gap四舍五入产生像素级误差。
- 用
width: max-content替代硬编码百分比，配合scroll-snap-type可规避部分偏移，但失去无限循环特性 - 更稳妥的做法是：显式声明图片数量（如
--count: 5），再用width: calc(var(--count) * 100% + (var(--count) - 1) * var(--gap))动态撑开容器 - 若图片来自CMS动态插入，必须后端/构建时注入
data-count属性，CSS无法实时读取子元素个数
@keyframes里用transform: translateX还是left？
必须用transform: translateX。用left触发布局重排，滚动会掉帧；而transform走合成层，硬件加速生效的前提是元素已启用will-change: transform或有transform: translateZ(0)。
- 动画起始值写成
transform: translateX(0)，终点写成transform: translateX(-50%)（对应双倍宽度容器） - 别用
100%作终点——它指容器宽度，而你滚动的是内容整体，应为-50%才刚好让第二组首图对齐第一组末尾 - 动画时长建议按图片数量线性调整：
--duration: calc(var(--count) * 2s)，否则图少时快得看不清，图多时慢得像停播
如何避免滚动到末尾时“闪一下”？
本质是动画周期结束瞬间，浏览器把元素瞬移到起点导致视觉断裂。解决方案不是加过渡，而是让动画关键帧覆盖整个周期，且终点状态与起点完全一致。
立即学习“前端免费学习笔记（深入）”；
- 关键帧必须写全：
0%, 100%都设为translateX(0)，50%设为translateX(-50%)，形成“匀速→回弹”假循环（实际靠浏览器无缝衔接） - 容器
.scroll-container必须设overflow: hidden，且不能有border或outline——哪怕1px都会在滚动临界点暴露裁剪缝 - 若仍偶现闪烁，加
backface-visibility: hidden到.slider-container，强制开启GPU渲染层
最易被忽略的点：图片加载完成前，img高度为0，flex布局塌陷会导致动画错位。务必给.slider设min-height或用aspect-ratio占位，否则上线后用户网络慢，第一屏永远是白条。
