纯css可实现稳定无闪烁图片无缝滚动，关键在于结构与动画参数对齐真实像素宽度；用flex+@keyframes translatex实现多图水平滚动，需外层overflow:hidden、图片固定宽高、scroll-track无间隙、位移值等于总像素宽、复制图片追加、避免-100%位移、鼠标悬停暂停、反向滚动、禁用ease改用linear、预设图片占位。
纯 CSS 就能实现稳定、无闪烁的图片无缝滚动，关键不在于写多少代码，而在于结构和动画参数是否对齐真实像素宽度。
用 flex + @keyframes translateX 实现多图水平滚动
这是最常用也最可控的方案，适合 3 张以上固定尺寸图片组成的“长廊”效果。
- 外层容器必须设
overflow: hidden，否则滚动边缘会露底色或空白 - 图片统一设固定宽高（如
width: 200px; flex-shrink: 0;），避免因内容差异导致总宽度计算偏差 -
.scroll-track用display: flex横向排列，且不能有gap、margin或未清除的换行空白（推荐直接用img不包li） - 动画终点位移值必须等于原始图片总宽度（不是
-100%，也不是-100vw），例如三张 200px 图，就写translateX(-600px) - 复制整组图片追加到末尾（A-B-C → A-B-C-A-B-C），动画跑完前半段时后半段已就位，视觉无缝
为什么 translateX(-100%) 容易出空白
百分比位移依赖于父容器宽度，而父容器若设为 width: 100% 或弹性布局，实际像素值可能受缩放、字体渲染、小数像素截断影响，导致动画终点错位 0.5px —— 这一点误差在循环时就会变成明显空白。
- 真实总宽要手算：每张图宽 + 所有左右
padding/margin，再乘以图片数量 - 如果图片尺寸不一致，先用
object-fit: cover和固定容器约束显示区域，再统一流式排布 - 调试时可在 DevTools 中临时取消
overflow: hidden，观察轨道是否完整铺满、有无间隙
鼠标悬停暂停与反向滚动的低成本增强
用户需要看清某张图时，突然暂停是基本交互需求；反向滚动则用于展示不同节奏感，两者都只需一行 CSS。
- 暂停：给滚动容器加
:hover { animation-play-state: paused; }，注意不要作用在子元素上 - 反向：复制一份动画，把
translateX(0)和translateX(-600px)对调，并设animation-direction: reverse，再用 JS 切换animation-name类名即可 - 慎用
ease缓动函数——它会让速度不均，人眼容易察觉起停顿挫，linear才是匀速滚动自然的关键
最容易被忽略的是图片加载完成前的占位处理：如果首屏图片还没加载完，flex 容器高度塌陷，动画会抖动甚至失效。建议所有 img 标签显式声明 height，或用 aspect-ratio 预留空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
