通过 CSS 动画 + 克隆内容 + 精确位移计算，可解决传统 translateX(-50%) 导致的跳帧与空白问题，实现视觉无缝循环滚动。
通过 css 动画 + 克隆内容 + 精确位移计算，可解决传统 `translatex(-50%)` 导致的跳帧与空白问题，实现视觉无缝循环滚动。
要打造一个真正平滑、无闪烁、无停顿的无限轮播（Infinite Carousel），关键不在于单纯延长动画时间或调整 translateX(-50%)，而在于让动画终点与起点在视觉上完全重合——即：当第一组元素完全移出视口时，第二组（克隆）元素恰好无缝接上，形成“永动”错觉。
✅ 核心原理：双倍内容 + 精确位移补偿
原方案失败的根本原因是：translateX(-50%) 仅将容器向左移动自身宽度的一半，但未考虑 gap、padding 或子项实际总宽，导致动画结束时露出空白。正确做法是：
- 克隆全部子元素（视觉上重复一次），使内容长度 ≥ 2×可视区域；
- 动画位移量 = -100% 容器内容总宽（即完整滚动一整套）；
- 但为避免因
gap引起的微小错位，需用calc()补偿半个gap（如gap: 20px→ 补-10px）。
✅ 推荐实现方案（纯 CSS，零 JS）
.slider {
padding: 20px;
overflow: hidden;
background: #f5f5f5;
}
/* 使用 display: contents 避免额外盒模型干扰 */
.slider-items-container {
display: contents;
}
.slider-items {
display: inline-flex;
flex-wrap: nowrap;
gap: 20px; /* 注意：此处 gap 影响位移精度 */
animation: scroll 8s linear infinite;
}
.slider-items img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
/* 关键！-100% 是滚动完整内容宽度，-10px 补偿 half-gap */
transform: translateX(calc(-100% - 10px));
}
}
<div class="slider">
<div class="slider-items-container">
<!-- 原始内容 + 完全克隆（顺序一致） -->
<div class="slider-items">
<!-- 第一组（原始） -->
<img src="https://img.freepik.com/psd-gratuit/lettres-argent-facade-du-batiment-verre_145275-162.jpg?x-oss-process=image/resize,p_40" alt="Building 1"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/M%C3%BCnster%2C_LVM%2C_B%C3%BCrogeb%C3%A4ude_--_2013_--_5149-51.jpg?x-oss-process=image/resize,p_40" alt="Building 2"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5VDK6xeSfkbgUbiwQPLF6sxWYBrQTfcgyn6qUv4l11w?x-oss-process=image/resize,p_40" alt="Building 3"><!-- ... 更多原始图 --><!-- 第二组（克隆，完全相同顺序） --><img src="https://img.freepik.com/psd-gratuit/lettres-argent-facade-du-batiment-verre_145275-162.jpg?x-oss-process=image/resize,p_40" alt="Building 1 (clone)"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/M%C3%BCnster%2C_LVM%2C_B%C3%BCrogeb%C3%A4ude_--_2013_--_5149-51.jpg?x-oss-process=image/resize,p_40" alt="Building 2 (clone)"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5VDK6xeSfkbgUbiwQPLF6sxWYBrQTfcgyn6qUv4l11w?x-oss-process=image/resize,p_40" alt="Building 3 (clone)"><!-- ... 对应克隆图 -->
</div>
</div>
</div>
⚠️ 注意事项与优化建议
-
克隆必须严格一致：HTML 结构、顺序、尺寸、
gap值均不可变动，否则接缝处会露白或错位； -
display: contents的作用：消除.slider-items-container的盒模型影响，避免额外padding/margin干扰动画基准； -
动画时长调优：
8s起步，根据内容数量和体验需求调整（内容越多，建议越慢）； -
响应式适配：若需适配移动端，可用
@media动态调整img宽度与gap，并同步更新calc()中的补偿值； -
性能提示：
transform+will-change: transform可进一步提升渲染性能（可选）：.slider-items { will-change: transform; }
✅ 总结
真正的无限轮播 ≠ 单纯循环动画，而是内容冗余 + 精确位移 + 视觉对齐的组合解法。避开 translateX(-50%) 这类经验性写法，改用 calc(-100% - half-gap)，再配合结构克隆，即可稳定输出专业级无缝滚动效果——无需 JavaScript，兼容现代浏览器，轻量且可靠。
