使一組元素水平向左移動-有解無憂

在下面的代碼中，我安排了幾個 div 水平對齊。我想創建 3 行，在每一行中，我希望 div 以不同的速度水平向左移動。

檢查此 giphy 以獲得視覺參考：使一組元素水平向左移動

像這樣影片（使一組元素水平向左移動

uj5u.com熱心網友回復：

如果您可以將元素的副本添加到您的 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>

顯然，您將希望利用時間來獲得所需的效果。

uj5u.com熱心網友回復：

我能想到的最簡單的方法是使用選取框標簽，但是該元素不會直接從右側顯示。

.marquee{
  width: 100%
}

<section>

<div class="block  ">
<div class="arrangeflex">

<marquee scrollamount="6">
  <span class="roundeddivs">Hello 1</span>
  <span class="roundeddivs">Hello 2</span>
  <span class="roundeddivs">Hello 3</span>
  <span class="roundeddivs">Hello 4</span>
</marquee>

<marquee scrollamount="5">
  <span class="roundeddivs">Hello 5</span>
  <span class="roundeddivs">Hello 6</span>
  <span class="roundeddivs">Hello 7</span>
  <span class="roundeddivs">Hello 8</span>
</marquee>

<marquee scrollamount="10">
  <span class="roundeddivs">Hello 9</span>
  <span class="roundeddivs">Hello 10</span>
  <span class="roundeddivs">Hello 11</span>
  <span class="roundeddivs">Hello 12</span>
</marquee>

<marquee scrollamount="8">
  <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>
</marquee>

</div>
</div>
</section>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436792.html

標籤：html css

上一篇：如何在一個div中水平對齊多個div，間距相等

下一篇：自動更改字體顏色紅色和綠色