如何实现背景图片在文本上的无缝循环滚动？

你的问题出在动画循环时，背景图的起始和结束状态视觉不匹配，导致出现突兀的重置。要实现无缝滚动，最可靠的简单方法是使用两张相同的背景图并排摆放，让动画滚动的距离等于背景图的宽度，利用两张图的衔接来消除重置感。

修改后的代码 #

CSS

#FlawlessImageRotation {
  font-weight: bold;
  color: transparent;
  animation: rotateImages 7s linear infinite;
  /* 引入两张相同的背景图，用于无缝衔接 */
  background-image: url('path.webp'), url('path.webp');
  background-size: 69%; 
  /* 第一张图从元素左侧开始，第二张图紧跟在第一张右侧 */
  background-position: 0 0, 69% 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}

@keyframes rotateImages {
  0% {
    background-position: 0 0, 69% 0;
  }
  100% {
    /* 两张图同步向左滚动等于自身宽度的距离（69%） */
    background-position: -69% 0, 0 0;
  }
}

HTML

<h2><strong id="FlawlessImageRotation"> TEXT </strong> more text.<br/> Even more text.</h2>

关键原理 #

• 双背景图衔接：通过设置两张相同的背景图，第一张在元素起始位置，第二张紧跟在第一张右侧（位置等于背景图的宽度百分比69%），确保视觉上是连续的。
• 同步滚动位移：动画让两张图同时向左滚动69%（等于背景图的宽度），当动画结束时，第二张图刚好移动到第一张图的初始位置，而第一张图的位置刚好是第二张图初始位置的左侧，循环时视觉完全衔接，不会出现突兀重置。
• 灵活调整方向：如果需要向右滚动，只需把关键帧的终点位置改为69% 0, 138% 0即可。

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