如何实现类似Gatsbyjs官网的灰色logo无缝自动轮播，hover时暂停？

这种轻量无缝轮播完全可以用纯CSS实现，无需引入第三方轮播库，性能开销极低，完全满足你要的流畅自动播放、hover暂停的需求。

实现思路 #

• 利用CSS动画实现线性滚动，通过重复拼接一遍logo内容实现视觉上的无缝衔接效果
• 用animation-play-state属性控制hover时暂停动画，不需要额外JS监听鼠标事件

完整代码示例 #

HTML结构 #

<div class="carousel-wrapper">
  <div class="carousel-track">
    <!-- 你的所有logo内容 -->
    <img src="logo1.png" alt="合作方logo1">
    <img src="logo2.png" alt="合作方logo2">
    <img src="logo3.png" alt="合作方logo3">
    <img src="logo4.png" alt="合作方logo4">
    <img src="logo5.png" alt="合作方logo5">
    <!-- 复制一遍相同的logo内容，用于无缝衔接 -->
    <img src="logo1.png" alt="合作方logo1">
    <img src="logo2.png" alt="合作方logo2">
    <img src="logo3.png" alt="合作方logo3">
    <img src="logo4.png" alt="合作方logo4">
    <img src="logo5.png" alt="合作方logo5">
  </div>
</div>

CSS样式 #

.carousel-wrapper {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 4rem; /* 调整logo之间的间距 */
  animation: scroll 20s linear infinite; /* 20s是滚动一周的时长，数值越小速度越快 */
}

/* 定义滚动动画，因为内容重复了一遍，所以只需要滚动50%就可以无缝衔接 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 鼠标hover时暂停滚动 */
.carousel-wrapper:hover .carousel-track {
  animation-play-state: paused;
}

动态内容优化（可选） #

如果你的logo是动态渲染的，不想手动复制内容，可以加几行简单JS自动完成重复拼接：

const track = document.querySelector('.carousel-track');
const trackContent = track.innerHTML;
// 自动拼接一遍内容
track.innerHTML = trackContent + trackContent;

注意事项 #

• 所有logo的宽度总和要超过外层容器宽度，否则会出现滚动空白
• 动画时长可以根据你的内容长度自行调整，保证滚动速度均匀自然即可
• 如果需要实现从右往左滚动的反向效果，把@keyframes里的translateX(-50%)改成translateX(50%)即可

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