ローディングアニメーションとは何ですか?-htmlチュートリアル-php.cn

ローディングアニメーションとは何ですか?

零下一度

リリース： 2017-07-24 10:20:56

オリジナル

1890 人が閲覧しました

始める前に、少し知識を復習しましょう。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.125 で、0 に達するまで増加します。

2. 2番目の効果

中央の大きなボールの位置は変更されず、その隣の3つの小さなボールがそれぞれ3つの正方形に含まれます。 {top:0;left :0;}、この交差は正方形のrotateZ回転を設定することで形成できます。

キーフレームアニメーションを通じてアニメーションプロセスを設定し（以下のキーフレームアニメーションの記述は最良の方法ではありません）、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);
      }
    }

ログイン後にコピー

今回はここまでです、後ほど追加します。

(続く)

以上がローディングアニメーションとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。