本文详解如何使用纯 CSS 构建真正无缝的无限滚动轮播图，通过精准计算容器宽度与动画位移，结合 transform: translateX() 替代 left，彻底消除循环时的视觉卡顿与跳帧问题。
本文详解如何使用纯 CSS 构建真正无缝的无限滚动轮播图，通过精准计算容器宽度与动画位移，结合 transform: translateX() 替代 left，彻底消除循环时的视觉卡顿与跳帧问题。
要实现无感知的无限滚动轮播（infinite scroll），关键在于两点：内容宽度精确可控 和 动画位移逻辑自洽。原代码中使用 width: 200% 与 left: -100% 的组合存在根本性缺陷——百分比值始终基于父容器（.marquee-block）计算，而非实际内容宽度，导致动画终点与起点无法对齐，从而产生“抖动”或“停顿感”。
✅ 核心修复方案
1. 精确计算 .marquee-inner 总宽度
不再依赖模糊的百分比（如 200%），而是显式声明内容总宽：
每个 .marquee-item 宽 580px，gap: 40px 在 <span></span> 内生效，即每组 5 个元素间有 4 个间隙 → 总间隙为 4 × 40px = 160px。
但注意：<span></span> 外层还存在一个额外 gap: 40px（来自 .marquee-inner span），且两组 <span></span> 并列，因此完整宽度应为：
.marquee-inner {
width: calc((580px + 40px) * 5 + 40px); /* = 3140px */
/* 解释：5个item × (580px宽 + 40px右间隙) + 最后一个40px额外间隙 */
}
⚠️ 注意：此处
+ 40px是因display: flex+gap在两<span></span>之间产生的额外间距，确保两组内容无缝拼接。
2. 使用 transform: translateX() 替代 left
left 百分比基于父容器宽，而 transform: translateX(-100%) 中的 100% 始终指元素自身宽度（即上面计算出的 3140px），语义清晰、性能更优，且天然支持硬件加速：
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); } /* ← 精准回退一整个内容宽度 */
}
@keyframes marqueeRight {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
3. HTML 结构保持双份内容（必要冗余）
为实现视觉无缝，必须提供至少两轮完整内容（如 1-5 + 1-5）。动画运行到末尾时，第二轮内容立即接续第一轮开头，人眼无法察觉切换：
<div class="marquee-inner to-left"> <span> <!-- 第一组：1 2 3 4 5 --> </span> <span> <!-- 第二组：1 2 3 4 5 → 无缝衔接 --> </span> </div>
✅ 完整优化后 CSS（精简关键部分）
.marquee-inner {
display: flex;
/* 精确宽度：每个item 580px + 每item后gap 40px，共5个item → 5×(580+40) + 最后gap 40 */
width: calc((580px + 40px) * 5 + 40px);
position: absolute;
/* 移除旧的 width: 200% */
}
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@keyframes marqueeRight {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
⚠️ 注意事项与进阶提示
-
禁止动态修改
.marquee-item宽度：文中强调580px固定宽，若需响应式，请改用clamp()或媒体查询单独控制，避免破坏calc()计算逻辑。 -
float: left可移除：.marquee-item已被包裹在display: flex的<span></span>中，float无效且可能干扰布局，建议删除。 -
动画时长与流畅度：
5s适合当前宽度；若内容增多，可按比例延长（如calc(5s * (新宽度 / 原宽度))）以维持匀速。 -
终极平滑技巧（可选）：若仍见细微闪烁，可将动画终点设为
99.9%并添加100% { transform: translateX(-100.1%); }，利用浏览器插值掩盖帧间跳跃——但本方案已足够稳定。
通过以上调整，你将获得一个完全纯 CSS、零 JS、固定宽度、真正无缝循环的滚动轮播组件，适用于 Banner、新闻流、客户评价等需要持续动感的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
