手順1.ブート画面自体の滑らかな外観
はい、はい。 メインパーツを開始する前に、読み込み画面自体の外観のアニメーションを作成します。
body { animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; } @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }
ステップ2.ブート画面の主要部分
次に、ブート画面自体に進みます。 4つのジャンプボールをアニメーションの主要コンポーネントにしましょう。
/* CSS */ div.circle { border-radius: 50%; background: #fff; width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; margin-top: 40%; }
<!-- HTML --> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div>
ステップ3.ボールにスタイルを適用する
今、私たちの小さな仕事の最高点が始まります。 疑似クラス：nth-child 、: first-child 、: last-childを使用して、ボールをカスタマイズします。
注意！ 各ボールのアニメーションを作成するときは、アニメーション自体の時間を変えて、ボールが異なる速度で異なる時間にバウンドするようにします。
/* */ div.circle:first-child { animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #4285f4; margin-right: 6px; } /* */ div.circle:nth-child(2) { animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #34a853; margin-right: 3px; } /* */ div.circle:nth-child(3) { animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #fbbc05; margin-left: 3px; } /* */ div.circle:last-child { animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #ea4335; margin-left: 6px; }
ステップ4.アニメーションキーフレームを作成する
したがって、プロジェクトの最後から2番目のステップは、ボールのアニメーションのキーフレームです。
@keyframes upload { from { transform: translateY(35px); } to { transform: translateY(-35px); } }
ステップ5.コードを組み合わせる
もちろん、最後の仕上げは最も平凡なものですが、それでもそれはありません。
<!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> /* */ body { animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; margin: 0; } /* */ div.circle { border-radius: 50%; background: #fff; width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; margin-top: 40%; } /* 1- */ div.circle:first-child { animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #4285f4; margin-right: 6px; } /* 2- */ div.circle:nth-child(2) { animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #34a853; margin-right: 3px; } /* 3- */ div.circle:nth-child(3) { animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #fbbc05; margin-left: 3px; } /* 4- */ div.circle:last-child { animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse; background-color: #ea4335; margin-left: 6px; } /*--- ---*/ /*-- --*/ @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } } /*-- --*/ @keyframes upload { from { transform: translateY(35px); } to { transform: translateY(-35px); } } </style> </head> <body> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </body> </html>
デモ： SoloLearnサンドボックスコード
これがあなたのウェブサイトの構築に役立つことを願っています。 これはローディング画面の最も単純な例でした。そのため、想像力を制限しないことをお勧めします。 これで、レイアウトの幸運を祈り、さよならを言います。