CSSで無限スクロールアニメーションを作成する💥

いくつかのロゴとウェブサイト上で無限の自動スクロールアニメーションを見ている可能性があります.このスクロールアニメーションは本当によく見えます.それで、我々がそれをする方法を見ましょう

6 divの内部コンテナを作成する

<div class="container">
  <div class="pink"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
  <div class="orange"></div>
  <div class="purple"></div>
  <div class="aqua"></div>
</div>

コンテナに単純なスタイルを加えて、divに幅、高さと異なる色を与えること.また、ここで画像を持つことができます.

.container {
  overflow: hidden;
  display: flex;
  height: 500px;
  width: 1500px;
  margin: 0 auto;
}

.container div {
  height: 400px;
  min-width: 300px;
  margin-left: 100px;
}

.pink {
  background-color: pink;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.purple {
  background-color: purple;
}

.aqua {
  background-color: aqua;
}

キーフレームの追加

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1500px, 0, 0); /* The image width */
  }
}

コンテナ内のキーフレームアニメーションの使用

.container div {
  height: 400px;
  min-width: 300px;
  margin-left: 100px;
  animation: slide 15s linear infinite;
}

TA DAはそれはそれを動作させるためにこれと同じくらい簡単でした!
https://www.loom.com/share/a2339e51fcf942a99de46264190e3c94
あなたがこのミニチュートリアルが好きであるという望み✌🏻
便利なリンク
Code
Social links