HTML/CSS实现背景图无限水平滚动：解决动画跳转问题

问题出在动画结束位置与起始位置的视觉衔接不匹配，导致滚动到终点后瞬间跳回起点。以下是具体修复方案：

核心原理 #

要实现无缝循环，必须满足两个条件：

• 动画的位移量等于单个背景图宽度的负数
• 容器宽度至少是单个背景图宽度的2倍

这样当动画滚动一个背景图宽度后，容器内重复的背景图会刚好填补左侧空缺，视觉上和起始状态完全一致，不会出现跳转。

修改后的代码 #

调整Tailwind配置 #

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      keyframes: {
        slide: {
          '0%': { transform: "translateX(0)" },
          '100%': { transform: "translateX(-200px)" }, // 改为单个背景图宽度的负数（示例图宽200px）
        },
        slidemobile: {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(-200px)" }, // 统一为单个图宽的负数
        },
      },
      animation: {
        slide: "slide 45s infinite linear",
        slidemobile: "slidemobile 20s infinite linear",
      },
    }
  }
}
</script>

调整容器样式 #

<div id="img-background" class="bg-contain bg-repeat-x h-full animate-slidemobile w-[400px] bg-[url('https://picsum.photos/200')] sm:w-[600px]">
</div>

关键说明 #

• 示例中背景图宽度为200px，所以位移量设为-200px，容器宽度设为400px（2倍图宽），确保滚动时始终有重复的背景图衔接
• 如果你的实际背景图宽度不同，只需对应修改translateX的数值和容器的w-[]值即可
• 保持linear动画速度，避免加速/减速导致的视觉断层

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