CSS3学習ページ読み込みアニメーション(1)

この記事では、CSS3 ページ読み込みアニメーションを 4 つ紹介します。困っている友人は参考にしていただければ幸いです。

2 日前、Web サイトで、純粋な CSS3 で書かれた優れた読み込みアニメーション効果を見つけたので、その効果に従って自分で書いてみました。

始める前に、少し知識を復習しましょう。CSS3 の新しいキーフレーム アニメーションを使用して、多くのアニメーションを実装できます。アニメーション遅延を使用してアニメーションの遅延実行を制御し、豊かな効果を実現できます。

アニメーション遅延の値が正の値の場合、アニメーションは初期状態から遅延されます。

アニメーション遅延の値が負の値の場合、アニメーションは初期状態から遅延されます。値から進みます (負の数の絶対値) 対応する状態が実行を開始します。

(エフェクトの画像がわかりにくい場合がありますが、ご了承ください)

1. 最初のエフェクト

合計 16 個の小さな正方形があります。位置を調整し、キー フレームを通じて正方形の透明度を変更します。

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

ここで、各正方形のアニメーション遅延値を設定します。は 2 秒、16 個の正方形を均等に分割すると 0.125 秒となるため、設定したアニメーション遅延値は -1.875 秒から始まり、0 に達するまで 0.125 の数値差で増加します。

#2. 2 番目の効果

#中央の大きなボールの位置は変わりません。小さなボールはそれぞれ 3 つの正方形に含まれています。小さなボールの位置 {top:0;left:0;} を設定し、この交点を形成するように正方形を回転させるように設定します。

キーフレーム アニメーションを通じてアニメーション プロセスを設定し (以下のキー フレーム アニメーションの記述は最良の方法ではありません)、各ボールのアニメーション遅延値を設定して、3 つのボールが異なるタイミングで移動できるようにします。目の前から瞬間が過ぎていきます。

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
      }
    }

さらに、大きなボールの周りを小さなボールが回転する視覚効果を実現するために、キー フレーム アニメーションを通じて 3 つの小さなボールの親コンテナの Z インデックス値を設定する必要もあります。

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

3. 3 番目の効果

##この効果は比較的単純で、ボールのサイズと透明度を変更するだけです (透明度、ボールの幅と高さは最初に定義されています)。

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }

4. 4 番目の効果

##最初は 4 つのボールが同じ位置に配置されており、ボールの左の値とボールのサイズはキーフレームを通じて変更できます。

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

今はこれだけ書きます。後でさらに追加します。 （続く） まとめ：以上がこの記事の全内容です、皆様の学習に少しでもお役に立てれば幸いです。関連チュートリアルの詳細については、

CSS 基本ビデオ チュートリアル

、

CSS3 ビデオ チュートリアル

、

bootstrap チュートリアル

をご覧ください。

以上がCSS3学習ページ読み込みアニメーション(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。