この記事の内容は、CSS を使用してドットを動かすアニメーション効果を実現する方法についてです。必要な方は参考にしていただければ幸いです。
https://github.com/comehope/front-end-daily-challenges
domを定義、コンテナには5が含まれています要素、各要素は 1 つの小さなボールを表します:
<p> <span></span> <span></span> <span></span> <span></span> <span></span> </p>
中央表示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, sienna, maroon); }
コンテナのサイズを定義します:
.loader { width: 6em; height: 1em; font-size: 40px; }
ドットを描画します:
.loader { position: relative; } .loader span { position: absolute; width: 1em; height: 1em; background-color: white; border-radius: 50%; left: 5em; }
右から左に移動し、左から戻るボールを定義します。右:
.loader { --duration: 5s; } .loader span { animation: walk linear infinite; animation-duration: var(--duration); } @keyframes walk { 0%, 95%, 100% { left: 5em; } 80%, 85% { left: 0; } }
ボールが左端で飛び上がり、右端で落ちるアニメーション効果を追加:
.loader span { animation: walk linear infinite, jump linear infinite; } @keyframes jump { 80%, 100% { top: 0; } 85%, 95% { top: -1em; } }
動きによってボールが左から右に戻るアニメーション効果を追加わずかに潰れたエフェクト:
.loader span { animation: walk linear infinite, jump linear infinite, squash linear infinite; } @keyframes squash { 80%, 100% { width: 1em; height: 1em; } 90% { width: 2em; height: 0.8em; } }
5 つのボールの変数を定義:
.loader span:nth-child(1) { --n: 1; } .loader span:nth-child(2) { --n: 2; } .loader span:nth-child(3) { --n: 3; } .loader span:nth-child(4) { --n: 4; } .loader span:nth-child(5) { --n: 5; }
ボールの数を宣言:
.loader { --dots: 5; }
アニメーションの遅延を設定:
.loader span { animation-delay: calc(var(--n) * var(--duration) / var(--dots) * -1); }
最後に、ポイントのサイズを小さく変更します:
.loader { font-size: 20px; }
完了!
関連する推奨事項:
CSS と D3 を使用して宇宙船の動的な効果を実現する方法
CSS を使用して色が変化する回転アニメーションの動的な効果を実現する方法以上がCSS を使用してドットを動かすアニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。