ホームページ >ウェブフロントエンド >CSSチュートリアル >純粋な CSS を使用してボールジャンプステップのアニメーション効果を実現する方法 (ソースコード添付)
この記事の内容は、純粋な CSS を使用してボールジャンプステップのアニメーション効果を実現する方法に関するものです (ソースコードが添付されています)。必要な友人が参考になれば幸いです。あなた。 。
https://github.com/comehope/front-end-daily-challenges
domを定義します。コンテナには5つの要素が含まれており、5つを表しますステップ:
<div> <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-color: black; }
コンテナのサイズを定義:
.loader { width: 7em; height: 5em; font-size: 40px; }
5 つのステップを描画:
.loader { display: flex; justify-content: space-between; align-items: flex-end; } .loader span { width: 1em; height: 1em; background-color: white; }
変数を使用して 5 つのステップを低位から高位に並べ替えます:
.loader span { height: calc(var(--n) * 1em); } .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 span { animation: sort 5s infinite; } @keyframes sort { 0%, 40%, 100% { height: calc(var(--n) * 1em); } 50%, 90% { height: calc(5em - (var(--n) - 1) * 1em); } }
小さなボールのアニメーションは以下で行われます。ブラインド法を使用して、同じ色の 2 つの小さなボールの交互の動きを 1 つの小さなボールが往復運動しているように見せます。
疑似要素を使用して 2 つの小さなボールを描画します:
.loader::before, .loader::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: white; border-radius: 50%; bottom: 1em; } .loader::before { left: 0; } .loader::after { left: 6em; }
ボールを上に移動させるアニメーション効果を追加します:
.loader::before, .loader::after { animation: climbing 5s infinite; visibility: hidden; } .loader::after { animation-delay: 2.5s; } @keyframes climbing { 0% { bottom: 1em; visibility: visible; } 10% { bottom: 2em; } 20% { bottom: 3em; } 30% { bottom: 4em; } 40% { bottom: 5em; } 50% { bottom: 1em; } 50%, 100% { visibility: hidden; } }
上に移動しながら両側に移動し、階段を上るアニメーション効果を形成します:
.loader::before { --direction: 1; } .loader::after { --direction: -1; } @keyframes climbing { 0% { bottom: 1em; left: calc(3em - 2 * 1.5em * var(--direction)); visibility: visible; } 10% { bottom: 2em; left: calc(3em - 1 * 1.5em * var(--direction)); } 20% { bottom: 3em; left: calc(3em - 0 * 1.5em * var(--direction)); } 30% { bottom: 4em; left: calc(3em + 1 * 1.5em * var(--direction)); } 40% { bottom: 5em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50% { bottom: 1em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50%, 100% { visibility: hidden; } }
最後に、階段を上がるアクションに擬人化効果を追加します:
@keyframes climbing { 0% { bottom: 1em; left: calc(3em - 2 * 1.5em * var(--direction)); visibility: visible; } 7% { bottom: calc(2em + 0.3em); } 10% { bottom: 2em; left: calc(3em - 1 * 1.5em * var(--direction)); } 17% { bottom: calc(3em + 0.3em); } 20% { bottom: 3em; left: calc(3em - 0 * 1.5em * var(--direction)); } 27% { bottom: calc(4em + 0.3em); } 30% { bottom: 4em; left: calc(3em + 1 * 1.5em * var(--direction)); } 37% { bottom: calc(5em + 0.3em); } 40% { bottom: 5em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50% { bottom: 1em; left: calc(3em + 2 * 1.5em * var(--direction)); } 50%, 100% { visibility: hidden; } }
これで完了です。
関連する推奨事項:
純粋な CSS を使用して、回転する自転車の車輪のアニメーション効果を実現する方法
純粋な CSS を使用して、旗を振るアニメーション効果を実現する方法 (ソース コードが添付されています)以上が純粋な CSS を使用してボールジャンプステップのアニメーション効果を実現する方法 (ソースコード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。