ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用してトラックローダーの効果を実現する方法
この記事の内容は、CSSを使用してトラックローダーの効果を実現する方法についてです。必要な友人が参考になれば幸いです。
エフェクトプレビュー
コード解釈
domを定義します。コンテナはトラックを表し、含まれる2つのサブ要素はフロントと排気を表します: <hr>
<div> <span></span> <span></span> </div> <hr>は中央に表示され、道路とページが同時に表示されます 間にスペースを空けます:
body { margin: 10%; padding-top: 10%; }トラックのキャビンを描画します:
.truck { width: 15em; height: 5em; font-size: 10px; background-color: #444; border-radius: 0.4em; }擬似要素を使用してキャビンの車輪を描画します:
.truck { position: relative; } .truck::before, .truck::after { content: ''; position: absolute; box-sizing: border-box; width: 2em; height: 2em; background-color: #444; border: 0.1em solid white; border-radius: 50%; bottom: -1em; } .truck::before { left: 0.6em; } .truck::after { right: 0.6em; }トラックの前部を描画します車:
.cab { position: absolute; width: 3.3em; height: 2.5em; background-color: #333; left: -3.5em; bottom: 0; border-radius: 40% 0 0.4em 0.4em; } .cab::before { content: ''; position: absolute; width: 2em; height: 1.5em; background-color: #333; top: -1.5em; right: 0; border-radius: 100% 0 0 0; }車の前部の車輪を描画:
.cab::after { content: ''; position: absolute; box-sizing: border-box; width: 2em; height: 2em; background-color: #444; border: 0.1em solid white; border-radius: 50%; bottom: -1em; left: 0.5em; }排気ガスの最初の部分を描画 ステータス:
.smoke, .smoke::before, .smoke::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: #333; right: -0.1em; bottom: -0.5em; border-radius: 50%; }排気ガスのアニメーション効果を追加:
.smoke { animation: smoke-1 2s infinite; } .smoke::before { animation: smoke-2 2s infinite; } .smoke::after { animation: smoke-3 2s infinite; } @keyframes smoke-1 { to { width: 3em; height: 3em; right: -3em; bottom: 0.5em; } } @keyframes smoke-2 { to { width: 2.5em; height: 2.5em; right: -6em; bottom: 0.8em; } } @keyframes smoke-3 { to { width: 3.5em; height: 3.5em; right: -4em; bottom: 0.2em; } }排気ガスのドリフト効果を増加ガス:
.smoke { animation: drift 2s infinite, smoke-1 2s infinite; } .smoke::before { animation: drift 3s infinite, smoke-2 3s infinite; } .smoke::after { animation: drift 4s infinite, smoke-3 4s infinite; } @keyframes drift { 0%, 100% { filter: opacity(0); } 15% { filter: opacity(0.9); } }トラック運転のアニメーション効果を追加:
.truck { animation: move 5s infinite; } @keyframes move { 0% { margin-left: 90%; } 50% { margin-left: 45%; } 100% { margin-left: 0; } 0%, 100% { filter: opacity(0); } 10%, 90% { filter: opacity(1); } }カード運転のバンプのアニメーション効果を追加:
.truck { animation: put-put 2s infinite, move 10s infinite; } @keyframes put-put { 0% { margin-top: 0; height: 5em; } 5% { margin-top: -0.2em; height: 5.2em; } 20% { margin-top: -0.1em; height: 5em; } 35% { margin-top: 0.1em; height: 4.9em; } 40% { margin-top: -0.1em; height: 5.1em; } 60% { margin-top: 0.1em; height: 4.9em; } 75% { margin-top: 0; height: 5em; } 80% { margin-top: -0.4em; height: 5.2em; } 100% { margin-top: 0.1em; height: 4.9em; } }これで完了です。 関連する推奨事項:
純粋な CSS を使用して笑顔で瞑想する小さな僧侶を実現する方法
CSS と D3 を使用してサイクロイドスイング効果アニメーションを実現する方法
以上がCSS を使用してトラックローダーの効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。