CSS 无限滚动轮播图：纯 CSS 实现无缝循环（无跳动、无 JS）

本文详解如何使用纯 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> 内生效，即每组 5 个元素间有 4 个间隙 → 总间隙为 4 × 40px = 160px。

但注意：<span> 外层还存在一个额外 gap: 40px（来自 .marquee-inner span），且两组 <span> 并列，因此完整宽度应为：

.marquee-inner {width: calc((580px + 40px) * 5 + 40px); /* = 3140px *//* 解释：5个item × (580px宽 + 40px右间隙) + 最后一个40px额外间隙 */}

⚠️ 注意：此处 + 40px 是因 display: flex + gap 在两 <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); }}

⚠️ 注意事项与进阶提示

1. 禁止动态修改 .marquee-item 宽度：文中强调 580px 固定宽，若需响应式，请改用 clamp() 或媒体查询单独控制，避免破坏 calc() 计算逻辑。
2. float: left 可移除：.marquee-item 已被包裹在 display: flex 的 <span> 中，float 无效且可能干扰布局，建议删除。
3. 动画时长与流畅度：5s 适合当前宽度；若内容增多，可按比例延长（如 calc(5s * (新宽度 / 原宽度))）以维持匀速。
4. 终极平滑技巧（可选）：若仍见细微闪烁，可将动画终点设为 99.9% 并添加 100% { transform: translateX(-100.1%); }，利用浏览器插值掩盖帧间跳跃——但本方案已足够稳定。

通过以上调整，你将获得一个完全纯 CSS、零 JS、固定宽度、真正无缝循环的滚动轮播组件，适用于 Banner、新闻流、客户评价等需要持续动感的场景。