求助：实现段落每行水平滚动后自动重复的CSS方案

问题背景 #

我有一段约20行的内容，需要实现每行水平滚动后无缝重复显示自身。比如某行内容是“1,2,3,4,”，目前已实现水平滚动，但滚动结束后无法让“1”衔接在“4”之后形成循环。我将每行放在bar_content1或bar_content2类的span标签中，实现隔行反向滚动，尝试用::before伪元素实现重复效果但未成功。

效果逻辑：文本行滚动到容器边界后，自身内容无缝衔接继续滚动，形成无限循环的视觉效果。

原始代码 #

HTML

<p>
  <span class="bar_content1">1,2,3,4,</span>
  <span class="bar_content2"> 5,6,7,8, </span>
</p>

CSS

.bar_content2 {
  display: block;
  width: 100%;
  transform: translateX(-100%);
  animation: move2 100s linear infinite;
}

@keyframes move2 {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.bar_content1 {
  display: block;
  width: 100%;
  transform: translateX(100%);
  animation: move1 100s linear infinite;
}

@keyframes move1 {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

p {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

p::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 100%;
  animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

解决方案 #

核心思路是给每个滚动的span标签添加伪元素复制自身内容，让伪元素和原内容一起滚动，确保视觉上无缝衔接。同时调整动画逻辑，让滚动距离匹配内容宽度，而非容器宽度。

修改后的代码

HTML

<p>
  <span class="bar_content1" data-text="1,2,3,4,">1,2,3,4,</span>
  <span class="bar_content2" data-text="5,6,7,8,">5,6,7,8,</span>
</p>

CSS

p {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  line-height: 1.5; /* 统一行高，避免行间距错乱 */
}

.bar_content1, .bar_content2 {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

/* 正向滚动：从右向左 */
.bar_content1 {
  animation: scrollRightToLeft 20s linear infinite;
}

@keyframes scrollRightToLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 反向滚动：从左向右 */
.bar_content2 {
  animation: scrollLeftToRight 20s linear infinite;
}

@keyframes scrollLeftToRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 伪元素复制内容，实现无缝衔接 */
.bar_content1::before, .bar_content2::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
}

/* 正向滚动的伪元素放在原内容右侧 */
.bar_content1::before {
  left: 100%;
}

/* 反向滚动的伪元素放在原内容左侧 */
.bar_content2::before {
  right: 100%;
}

关键说明 #

1. 伪元素定位：给每个span添加data-text属性，通过伪元素复制内容，正向滚动的伪元素放在原内容右侧，反向滚动的放在左侧，确保滚动时内容无缝衔接。
2. 滚动距离匹配：动画的起始/结束位置设为100%和-100%，滚动距离刚好是内容宽度的两倍（原内容+伪元素内容），实现无限循环。
3. 元素类型调整：将span设为inline-block，让宽度自适应内容，避免容器宽度干扰滚动逻辑。

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