使用CSS动画实现箭头的无缝循环移动

我来帮你实现这个单个箭头的无缝循环滚动效果！核心思路是让两个完全相同的SVG箭头组成连续的序列，通过CSS动画让它们同步滚动，结合容器的overflow:hidden特性，就能实现视觉上的“单个箭头无限循环”。

实现步骤与代码示例 #

1. 调整HTML结构

把两个完全一致的SVG箭头放在一个内部容器里，外层是负责裁剪的arrows-wrapper：

<div class="arrows-wrapper">
  <div class="arrows-container">
    <!-- 第一个箭头SVG -->
    <svg class="arrow" viewBox="0 0 124 83" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 你的箭头路径代码 -->
    </svg>
    <!-- 第二个完全相同的箭头SVG -->
    <svg class="arrow" viewBox="0 0 124 83" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- 和第一个完全一样的箭头路径代码 -->
    </svg>
  </div>
</div>

2. 编写CSS样式与动画

关键是让内部容器的高度等于两个箭头的总高度，然后通过动画让它向上滚动单个箭头的高度，利用循环实现无缝衔接：

.arrows-wrapper {
  width: 124px;
  height: 83px;
  overflow: hidden;
  /* 可选：加边框方便调试 */
  /* border: 1px solid #ddd; */
}

.arrows-container {
  height: 166px; /* 单个箭头高度 × 2 */
  animation: seamlessScroll 2s linear infinite;
}

.arrow {
  width: 100%;
  height: 83px;
  display: block;
}

@keyframes seamlessScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-83px); /* 向上滚动单个箭头的高度 */
  }
}

效果原理说明 #

• 当动画执行到100%时，内部容器向上移动了83px，第一个箭头刚好完全移出arrows-wrapper的可视区域，此时第二个箭头刚好完全进入可视区域。
• 因为动画是无限循环+线性速度（linear），当动画重置回0%时，容器瞬间回到初始位置，但由于两个箭头完全一致，视觉上完全看不出断层，就实现了“单个箭头持续循环滚动”的效果。

注意事项 #

• 两个SVG箭头必须完全一致（尺寸、路径、颜色都要相同），否则衔接处会出现破绽。
• 动画一定要用linear速度曲线，确保滚动速度均匀，避免快慢变化导致的衔接卡顿。
• 如果SVG有多余空白，要调整viewBox让图形紧贴边缘，防止衔接时出现空隙。

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