本文详解如何通过纯 CSS 实现视觉无缝、循环自然的无限横向轮播，核心在于精准计算 translateX 的终点位移，消除动画重置时的空白闪动。
本文详解如何通过纯 css 实现视觉无缝、循环自然的无限横向轮播，核心在于精准计算 `translatex` 的终点位移，消除动画重置时的空白闪动。
要让 CSS 驱动的轮播真正“无限”，关键不在于增加元素数量，而在于让动画结束帧与起始帧在视觉上完全对齐——即当元素组向左滚动至“最后一项即将消失”时，其位置必须恰好等于初始状态的镜像偏移，从而形成视觉闭环。
原代码中 transform: translateX(-50%) 是典型误区：它仅将容器左移自身宽度的一半，但未考虑子项间距（gap）和实际总滚动距离。由于 .slider-items 是 flex 容器，其总宽度 = 所有图片宽度 + (n−1) × gap。若共 12 张图、gap: 40px，则总间隙为 440px；单纯 -50% 无法覆盖这一增量，导致动画末尾出现明显空白。
✅ 正确解法是使用 calc() 动态计算终点位移：
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
/* 向左滚动「一个完整内容块」的距离 */
transform: translateX(calc(-50% - 20px)); /* 假设 gap: 40px → 半个 gap = 20px */
}
}为什么是 calc(-50% - 20px)？
立即学习“前端免费学习笔记（深入）”；
-
-50%使容器左移自身宽度一半，让后半部分内容进入视口； - 再减去
gap / 2（即20px），是为了补偿 flex 布局中首尾元素到容器边缘的「隐式半间距」，确保第 1 个元素在动画结束时，恰好与原始第 1 个元素位置重合，实现像素级接续。
此外，还需注意结构优化：
- 移除可能干扰布局的
padding-top和margin，统一用padding控制内外边距； - 使用
display: inline-flex替代flex，避免换行干扰； - 外层容器
.slider必须设置overflow: hidden，严格裁剪溢出内容； - 图片建议显式声明
width/height或flex: 0 0 auto，防止缩放抖动。
完整推荐代码如下：
.slider {
padding: 20px;
overflow: hidden;
background: #f5f5f5;
}
.slider-items {
display: inline-flex;
gap: 40px;
animation: scroll 25s linear infinite; /* 速度按需调整 */
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 20px));
}
}
.slider-items img {
width: 120px;
height: 90px;
object-fit: cover;
filter: grayscale(100%);
flex-shrink: 0;
}? 小贴士：
- 若图片数量为奇数，或
gap值变化，请重新校准calc(-50% - Xpx)中的X（通常为gap / 2）； - 可添加
animation-timing-function: linear确保匀速滚动，避免缓动导致节奏感断裂； - 如需暂停交互（如 hover 暂停），可添加
animation-play-state: paused； - 此方案兼容现代浏览器（Chrome 100+、Firefox 105+、Safari 16.4+），无需 JS 即可运行。
通过精准的位移控制与结构精简，你将获得一个轻量、稳定、真正无限循环的 CSS 轮播组件。
