如何实现无断点的CSS水平无限滚动Logo轮播

当前方案的断点问题源于动画循环时元素瞬间跳回初始位置，要实现真正的无缝滚动，核心是让滚动内容在视觉上形成连续循环，以下是修正后的实现方案：

解决思路 #

1. 复制一份完全相同的Logo列表到滚动容器内，确保动画滚动至末尾时，后续内容与开头完全衔接
2. 调整动画位移逻辑，让滚动距离恰好等于单份内容的长度，循环时视觉无断层
3. 优化布局样式，避免间距异常和未定义变量问题

修正后的完整代码 #

CSS 样式 #

body {
  margin: 0;
}

.scroll {
  position: relative;
  width: 100vw;
  background-color: #222; /* 替换原未定义的Sass变量为具体颜色 */
  overflow: hidden;
  z-index: 1;
  margin: 0;
  padding: 1rem 0; /* 增加上下内边距，优化视觉体验 */
}

.m-scroll {
  display: flex;
  gap: 2rem; /* 控制Logo之间的间距，可按需调整 */
  animation: scrollText 15s infinite linear; /* 动画时长可根据需求修改 */
}

span {
  display: flex;
  align-items: center;
}

img {
  height: 60px; /* 统一Logo高度，避免尺寸差异 */
  object-fit: contain;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%); /* 滚动距离为容器内容的一半，对应单份内容长度 */
  }
}

HTML 结构 #

<div class="scroll">
  <div class="m-scroll">
    <!-- 第一份Logo列表 -->
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <!-- 第二份相同的Logo列表，实现无缝衔接 -->
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"></span>
  </div>
</div>

原理说明 #

• 滚动容器内包含两份完全相同的内容，当动画执行到translateX(-50%)时，第二份内容的起始位置恰好与第一份内容的起始位置重合，视觉上无任何断点
• 使用gap替代justify-content: space-between，避免复制内容后出现首尾间距不一致的问题
• 统一Logo高度并添加内边距，提升整体布局的美观性

内容的提问来源于stack exchange，提问作者user3074558