如何用React与CSS实现无第三方依赖的无限Logo轮播

核心思路 #

无限循环的关键是复制一份轮播内容，通过CSS动画让容器横向平移，当原内容完全移出视口时，复制的内容刚好接上；动画结束瞬间重置位置，视觉上实现无缝衔接。

1. 修改React组件代码 #

将原clientsContent数组拼接一份自身，确保轮播容器内有两组完全相同的Logo，避免动画过程中出现空白：

<section className={classes['container']}>
    <div className={classes['logosSlide']}>
        {/* 渲染原内容 + 复制一份内容 */}
        {[...(props.clientsContent || []), ...(props.clientsContent || [])].map((client, i) => (
            <span key={i} className={classes['logoItem']}>
                {client.attributes.clientName}
            </span>
        ))}
    </div>
</section>

2. 编写CSS样式 #

通过容器溢出隐藏、弹性布局排列Logo，配合CSS动画实现无限平移：

.container {
  overflow: hidden; /* 隐藏超出容器的内容 */
  width: 100%;
}

.logosSlide {
  display: flex;
  gap: 2rem; /* 控制Logo之间的间距 */
  animation: scroll 20s linear infinite; /* 20s为动画总时长，可根据内容调整 */
  width: max-content; /* 让容器宽度适配所有内容 */
}

.logoItem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px; /* 设置每个Logo的最小宽度，保证排版一致 */
  font-size: 1.2rem;
}

/* 定义平移动画：移动距离为原内容的总宽度 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 可选：鼠标悬停暂停动画 */
.container:hover .logosSlide {
  animation-play-state: paused;
}

关键细节说明 #

• 动画时长调整：Logo数量多或单个Logo宽度大时，增加scroll动画时长避免滚动过快；反之则缩短。
• 响应式适配：通过媒体查询调整logoItem的最小宽度和gap值，保证移动端显示正常。
• 性能优化：使用transform做平移动画，浏览器会启用GPU加速，避免页面卡顿。

内容的提问来源于stack exchange，提问作者Amir Ben Shimol