ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して回転する自転車の車輪をアニメーション化する方法
この記事の内容は、純粋な CSS を使用して回転する自転車のホイールのアニメーション効果を実現する方法についてです。必要な方は参考にしていただければ幸いです。
https://github.com/comehope/front-end-daily-challenges
domを定義し、コンテナには6つの要素が含まれます:
<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
中央に表示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(#555, #222); }
ホイールのリムを描画:
.wheel { width: 9em; height: 9em; font-size: 25px; border: 0.4em solid #777; border-radius: 50%; box-shadow: 0 0 0 0.5em #111; }
スポークのスタイルを定義:
.wheel { display: flex; align-items: center; justify-content: center; } .wheel span { position: absolute; width: 8em; height: 1em; border: 0.1em solid; border-color: #ccc transparent; }
変数を定義して複数のスポークを描画:
.wheel span { transform: rotate(calc((var(--n) - 1) * 30deg)); } .wheel span:nth-child(1) { --n: 1; } .wheel span:nth-child(2) { --n: 2; } .wheel span:nth-child(3) { --n: 3; } .wheel span:nth-child(4) { --n: 4; } .wheel span:nth-child(5) { --n: 5; } .wheel span:nth-child(6) { --n: 6; }
ホイールを回転させる:
.wheel span { animation: run 4s linear infinite; } @keyframes run { to { transform: rotate(calc((var(--n) - 1) * 30deg + 360deg)); } }
疑似要素で地面を描画上の線:
.wheel { position: relative; } .wheel::before { content: ''; position: absolute; width: 15em; height: 0.2em; top: 11em; background-image: linear-gradient( to right, silver 0, silver 4em, transparent 4em, transparent 5em, silver 5em, silver 10em, transparent 10em, transparent 12em, silver 12em, silver 14em, transparent 14em, transparent 15em ); }
最後に、地面の線を動かして、前に進む車輪の効果を作成します:
.wheel::before { background-position: 15em; animation: run2 6s linear infinite; } @keyframes run2 { to { background-position: -15em; } }
これで完了です。
関連する推奨事項:
純粋な CSS を使用して、ボールが長方形の背景に変化するボタンのホバー効果を実現する方法 (ソース コードが添付されています)
純粋な CSS を使用して折り鶴を実装する方法 (ソース コードが添付されています) )
CSSの使い方 D3で小魚が泳ぐインタラクティブアニメーションを実装する(コード付き)以上が純粋な CSS を使用して回転する自転車の車輪をアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。