使一组元素水平向左移动

Question

在下面的代码中，我安排了几个 div 来水平对齐。我想创建 3 行，在每行中，我希望 div 以不同的速度水平向左移动。

检查此 giphy 以获取视觉参考：http://www.giphy.com/gifs/ME8Av6LT9hgymDnqSP

.roundeddivs {
  background: white;
  white-space: nowrap;
  padding: 20px 25px;
  border-radius: 44px;
  max-height: "1px";
  width: auto;
  margin: 8px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}


.block {
  padding: 6rem 2rem;
}

.arrangeflex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 25px;
}

<section>
<div class="block  ">
<div class="arrangeflex">
<span class="roundeddivs">Hello 1</span>
<span class="roundeddivs">Hello 2</span>
<span class="roundeddivs">Hello 3</span>
<span class="roundeddivs">Hello 4</span>
<span class="roundeddivs">Hello 5</span>
<span class="roundeddivs">Hello 6</span>
<span class="roundeddivs">Hello 7</span>
<span class="roundeddivs">Hello 8</span>
<span class="roundeddivs">Hello 9</span>
<span class="roundeddivs">Hello 10</span>
<span class="roundeddivs">Hello 11</span>
<span class="roundeddivs">Hello 12</span>
<span class="roundeddivs">Hello 13</span>
<span class="roundeddivs">Hello 14</span>
<span class="roundeddivs">Hello 15</span>
<span class="roundeddivs">Hello 16</span>
<span class="roundeddivs">Hello 17</span>
</div>
</section>

动画如下（动画 GIF）：

Answer 1

如果您可以将元素的副本添加到 HTML 中，则可以在 CSS 中完成其余操作。

每行都被独立处理，并且至少有该行中项目的两个副本 - 如果您认为这些项目不会在某些设备上延伸到包含块的整个宽度，则添加更多（加倍）。

一行向左移动其总宽度的 50%，然后重新开始。这意味着该操作看起来很流畅，因为当该行击中其容器的左侧时，该行的后半部分会被前半部分“覆盖”。

此代码片段使用 CSS 变量 --t 来设置计时，每行都可以设置自己的 --t。

此代码片段中仅显示几行来说明这一点。根据需要添加更多内容，每个内容都在其自己的父 div 中。我在每行中放置了 4 个项目的副本 - 可能有点过分了，这取决于您的内容以及您尝试设计的设备。

.roundeddivs {
  background: white;
  white-space: nowrap;
  padding: 20px 25px;
  border-radius: 44px;
  max-height: "1px";
  width: auto;
  margin: 8px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.block {
  padding: 6rem 2rem;
  width: 50vw;
}

.marquees {
  margin: 0 25px;
  white-space: nowrap;
  overflow: hidden;
}

.marquees>* {
  white-space: nowrap;
  display: flex;
  width: fit-content;
  animation: move var(--d) linear infinite;
}

.marquees>*:nth-child(1) {
  --d: 9s;
}

.marquees>*:nth-child(2) {
  --d: 15s;
}

.marquees>*:nth-child(3) {
  --d: 8s;
}

.marquees>*:nth-child(4) {
  --d: 15ss;
}

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

<section>
  <div class="block  ">
    <div class="marquees">
      <div>
        <span class="roundeddivs">Hello 1</span>
        <span class="roundeddivs">Hello 2</span>
        <span class="roundeddivs">Hello 3</span>
        <span class="roundeddivs">Hello 4</span>
        <span class="roundeddivs">Hello 5</span>
        <span class="roundeddivs">Hello 6</span>
        <span class="roundeddivs">Hello 7</span>
        <span class="roundeddivs">Hello 8</span>
        <span class="roundeddivs">Hello 1</span>
        <span class="roundeddivs">Hello 2</span>
        <span class="roundeddivs">Hello 3</span>
        <span class="roundeddivs">Hello 4</span>
        <span class="roundeddivs">Hello 5</span>
        <span class="roundeddivs">Hello 6</span>
        <span class="roundeddivs">Hello 7</span>
        <span class="roundeddivs">Hello 8</span>
        <span class="roundeddivs">Hello 1</span>
        <span class="roundeddivs">Hello 2</span>
        <span class="roundeddivs">Hello 3</span>
        <span class="roundeddivs">Hello 4</span>
        <span class="roundeddivs">Hello 5</span>
        <span class="roundeddivs">Hello 6</span>
        <span class="roundeddivs">Hello 7</span>
        <span class="roundeddivs">Hello 8</span>
        <span class="roundeddivs">Hello 1</span>
        <span class="roundeddivs">Hello 2</span>
        <span class="roundeddivs">Hello 3</span>
        <span class="roundeddivs">Hello 4</span>
        <span class="roundeddivs">Hello 5</span>
        <span class="roundeddivs">Hello 6</span>
        <span class="roundeddivs">Hello 7</span>
        <span class="roundeddivs">Hello 8</span>
      </div>
      <div>
        <span class="roundeddivs">Hello 9</span>
        <span class="roundeddivs">Hello 10</span>
        <span class="roundeddivs">Hello 11</span>
        <span class="roundeddivs">Hello 12</span>
        <span class="roundeddivs">Hello 13</span>
        <span class="roundeddivs">Hello 14</span>
        <span class="roundeddivs">Hello 15</span>
        <span class="roundeddivs">Hello 16</span>
        <span class="roundeddivs">Hello 17</span>
        <span class="roundeddivs">Hello 9</span>
        <span class="roundeddivs">Hello 10</span>
        <span class="roundeddivs">Hello 11</span>
        <span class="roundeddivs">Hello 12</span>
        <span class="roundeddivs">Hello 13</span>
        <span class="roundeddivs">Hello 14</span>
        <span class="roundeddivs">Hello 15</span>
        <span class="roundeddivs">Hello 16</span>
        <span class="roundeddivs">Hello 17</span>
        <span class="roundeddivs">Hello 9</span>
        <span class="roundeddivs">Hello 10</span>
        <span class="roundeddivs">Hello 11</span>
        <span class="roundeddivs">Hello 12</span>
        <span class="roundeddivs">Hello 13</span>
        <span class="roundeddivs">Hello 14</span>
        <span class="roundeddivs">Hello 15</span>
        <span class="roundeddivs">Hello 16</span>
        <span class="roundeddivs">Hello 17</span>
        <span class="roundeddivs">Hello 9</span>
        <span class="roundeddivs">Hello 10</span>
        <span class="roundeddivs">Hello 11</span>
        <span class="roundeddivs">Hello 12</span>
        <span class="roundeddivs">Hello 13</span>
        <span class="roundeddivs">Hello 14</span>
        <span class="roundeddivs">Hello 15</span>
        <span class="roundeddivs">Hello 16</span>
        <span class="roundeddivs">Hello 17</span>
      </div>
    </div>
  </div>
</section>

显然，您需要调整时间以获得所需的效果。