段落中每行无限滚动文本

Question

我有一个大约 20 行的段落。我希望每一行在 1 次滚动完成后重复自身。例如：

假设我在一个段落中有一行内容如下：

1,2,3,4,

我希望该行在屏幕上水平滚动（我实现了），但我也希望在单次滚动完成后 1 出现在 4 之后。

我可以使用水平滚动，但句子不重复。

我的每个句子都在一个范围内，它是 bar_content1 或 bar_content2。这样我就可以让其他所有句子都朝不同的方向发展。

我尝试利用 ::before 函数，但我似乎无法让它工作。

我在下面添加了一张图片，展示了我最终想法的逻辑。

注意：由于隐私原因，此问题中包含的 HTML 不是我的项目中的内容。话虽这么说，代码的格式是相同的。

.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%);
  }
}


/* Animate each line in the paragraph */

p {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  /* Prevent line breaks */
}

p::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 100%;
  /* Start from the right side */
  animation: scrollText 20s linear infinite;
  /* Adjust the duration as needed */
}

@keyframes scrollText {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
  /* Move to the left, creating the interlacing effect */
}

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

Answer 1

现在我在您的更新后有了更好的理解，添加了代码和图像来描述您想要的效果。 你基本上想要一个旋转木马。在线快速搜索会显示很多选项。 这个页面特别有一些好东西：https://css-tricks.com/css-only-carousel/

我修改了该页面上的最后一个示例，它使用了名为 Flickity 的 JS 库：https://flickity.metafizzy.co/

我以前从未亲自使用过Flickety，从我看来似乎相当不错，而且它很简单，并且不需要其他依赖项。它可能并不完美，但我认为这会让你完成 90% 的任务！

请注意，FLickety 有很多选项，您可以在此处阅读：https://flickity.metafizzy.co/options.html，我已在

data-flickity

HTML 属性中为您设置了其中一些选项。 根据需要更改这些。

.carousel {
  background: #EEE;
}

.carousel-cell {
  margin-right: 10px;
  width: 50%;
  background: #8C8;
  padding: 15px;
}

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<div class="carousel"
  data-flickity='{
    "autoPlay": 1500,
    "selectedAttraction": 0.01,
    "pauseAutoPlayOnHover": false,
    "friction": 0.15,
    "wrapAround": true,
    "draggable": false,
    "prevNextButtons": false,
    "pageDots": false,
    "contain": true
  }'>
  <div class="carousel-cell">1, 2, 3, 4</div>
  <div class="carousel-cell">5, 6, 7, 8</div>
  <div class="carousel-cell">9, 10, 11, 12</div>
</div>