本文详解通过精确控制 background-size 与 background-position 的百分比关系，构建视觉上连续、无跳变的无限向左滑动背景动画，避免传统方案中因重置导致的闪烁或停顿。
本文详解通过精确控制 background-size 与 background-position 的百分比关系，构建视觉上连续、无跳变的无限向左滑动背景动画，避免传统方案中因重置导致的闪烁或停顿。
要实现真正无缝、无限向左滑动的背景动画，关键在于打破“用 background-size: cover + 线性位移”这一常见但本质有缺陷的思路。cover 会强制缩放图像以填满容器，导致 background-position 的百分比基准不可控；而单纯延长动画时长（如 30s）或增大位移值（如 1000%），只是推迟了画面重置的瞬间，并未解决根本问题——动画终点与起点之间存在视觉断层。
✅ 正确解法的核心逻辑是：让背景图在水平方向上「物理铺开足够宽」，再通过精准的位移范围，使其滚动一个「完整周期」后，右侧新出现的部分恰好与左侧刚移出的部分完全一致，从而形成视觉闭环。
✅ 推荐实现方案（专业、可控、可复用）
.container {
height: 200px;
width: 500px;
font-size: 200px;
font-family: sans-serif;
font-weight: 600;
background-image: url('https://i.ibb.co/5F5H2S2/background.jpg');
background-size: 300% auto; /* 关键：水平方向铺开为容器宽度的3倍 */
background-repeat: no-repeat;
background-position: 0 50%; /* 垂直居中，水平起始点为左边缘 */
animation: slide-bg 5s linear infinite;
}
@keyframes slide-bg {
0% {
background-position: 0% 50%;
}
100% {
background-position: 150% 50%; /* 移动距离 = background-size / 2 */
}
}<div class="container">hello</div>
? 为什么是 300% auto 和 150%？
- background-size: 300% auto 表示：背景图水平方向被拉伸为容器宽度的 3 倍（即图像在 X 轴上「物理覆盖」了 3 个容器宽度），垂直方向按比例自适应。
- 此时，background-position: 0% 对应图像最左侧对齐容器左边缘；background-position: 100% 对应图像最右侧对齐容器右边缘；而 150% 则意味着图像向右移动了 1.5 倍容器宽度。
- 因为图像总宽是容器的 3 倍，所以从 0% 滚动到 150%，恰好让图像中间 100% 宽度的内容流过容器视口——且当动画结束时，容器看到的正是图像中段区域；下一循环从 0% 开始，由于图像左右边缘内容具有自然重复性（或经设计具备接续性），人眼无法察觉衔接点，实现视觉无缝循环。
? 进阶提示：提升兼容性与鲁棒性
- 始终显式声明 background-repeat: no-repeat，防止意外平铺干扰位移效果；
- 垂直方向建议统一使用 50%（居中），避免因图片高宽比差异造成上下抖动；
- 若背景图本身不具天然重复性，可借助图像编辑工具制作「无缝拼接版」，或使用 CSS linear-gradient 搭配多层背景模拟纹理滚动；
- 动画时长 5s 可根据设计节奏自由调整，位移终点值需同步按比例更新（例如 background-size: 400% auto → 终点用 200%）。
✅ 总结：真正的无限滑动 ≠ 单纯延长动画，而在于构造一个可自我衔接的背景空间拓扑。通过 background-size 主动定义图像在容器坐标系中的「有效长度」，再以 background-position 在该长度内做等距位移，即可优雅、高效、零hack地达成专业级平滑滚动效果。
