求助：如何用CSS实现全景图无缝循环滚动（类似滚筒效果）

嘿，我完全懂你想要的那种缓慢重复、无缝衔接的滚筒滚动效果——就像侧面贴满图的滚筒慢慢转动，视觉上无限循环没有断点对吧？你之前用margin位移的方式确实没法实现无缝，因为单张图片滚动到末尾时会露出空白区域，得换个思路来做。

核心思路 #

要实现无缝滚动，关键是让图片的副本和原图并排放在一个容器里，然后让这个组合整体平移。当原图完全滚出容器视野时，副本刚好完全进入视野，此时动画回到初始状态，视觉上就不会有断裂感。另外用transform: translateX()代替margin来做位移，不仅性能更好，也更容易精准控制位置。

完整实现代码 #

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 原图 + 副本 -->
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="logo" />
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="logo" />
  </div>
</div>

<p style="font-family: arial, helvetica, serif; color: blue; border: 1px solid blue; padding: 10px; border-radius: 5px; background-color: lightblue; color: blue; text-align:center;"> Image Animation. </p>

/* 容器：隐藏超出部分，限制宽度 */
.scroll-container {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #ccc; /* 可选：方便看容器范围 */
}

/* 内容容器：放两张图，宽度设为单图的2倍 */
.scroll-content {
  display: flex;
  width: calc(2 * 100%);
  animation: rollVertical 5s linear infinite;
}

/* 图片：占满容器宽度 */
.scroll-content img {
  width: 100%;
  flex-shrink: 0; /* 防止图片被压缩 */
}

/* 鼠标悬停暂停动画 */
.scroll-content:hover {
  animation-play-state: paused;
}

/* 滚动动画：平移距离为单图的宽度（即容器宽度） */
@keyframes rollVertical {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 向左平移整个内容容器的一半宽度，刚好让副本接上 */
  }
}

关键细节说明 #

• 双图布局：scroll-content里放两张完全相同的图片，用flex让它们并排，宽度设为容器的2倍，这样滚动时总有一张图在视野内。
• 动画位移：translateX(-100%)刚好让整个内容容器向左移动一张图的宽度，此时副本完全进入容器，动画循环后视觉上没有断点。
• 性能优化：用transform做位移属于GPU加速属性，比margin更流畅，不会出现卡顿。
• hover暂停：保持了你原来的需求，鼠标悬停时动画暂停。

如果你的全景图是横向长图（比如一张包含多个连续画面的宽图），也可以用类似思路：把长图复制一份拼在后面，然后做相同的平移动画，效果是一样的。

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