多彩なローディングアニメーション共有-htmlチュートリアル-php.cn

多彩なローディングアニメーション共有

零下一度

リリース： 2017-07-26 17:40:30

オリジナル

1523 人が閲覧しました

さまざまなローディングアニメーションの共有:

23のエフェクト

2 つの正方形、最初は左上に配置 (上: 0) ; 左: 0;); 完全な動きは 4 つの段階に分かれています: 第 1 段階では、左上を右上に移動し、幅と高さを縮小します。右下に 180 度回転、3 段階目で幅と高さが元に戻り、右下を左下に移動し、270 度回転し、4 段階目で幅と高さを縮小します。を左上に移動し、360°回転し、幅と高さを元に戻します。アニメーション遅延時間の差は、アニメーション時間のマイナスの半分です。

{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }

ログイン後にコピー

24、エフェクト24

炎の鼓動エフェクトと同様に、3つの正方形のdivを水平方向の中央に配置し、垂直方向の下部に配置します。初期状態では幅が広く、高さは 0 に設定されています。上に移動しながら、正方形の幅と高さを変更します。

rreeee25、効果Twenty25歳は、私が子供の頃にプレイしたゲームに非常に似ています-man

左側のパックマン: 2 各 div の幅と高さは 0、境界線のみが設定され、右側の境界線の色属性は透明に設定されます。コードと効果は次のとおりです。

{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {  50% {
        height: 30px;width: 30px;top: 50%;
      }  100% {height: 0;width: 0;top: 0;
      }}

ログイン後にコピー

パックマンの口が作成され、残りの 2 つは、1 つの div が正の Z 軸に向かって回転し、もう 1 つの div が逆 Z 軸に向かって回転して、食べるアクションを作成します。

右側の 3 つの小さなボールはすべて右側の中央に移動し、パックマンの口に向かって移動するように設定されています。ボールとパックマンのアニメーション時間を適切に調整するだけです。

.pac_head {  border: 25px solid #fff;  border-right-color: transparent;  border-radius: 50%;
    }

ログイン後にコピー

26、エフェクト26

たたき紙

このエフェクトの難しさは、落下や変形のエフェクトをどのように作成するかです。実はとても簡単です。まず、正方形は、Z 軸を中心に 90 の倍数回転させれば、元の画像とまったく同じに見えることを理解する必要があります。この効果を作成するのは非常に簡単です。各コーナーに変形効果を追加することを検討する必要があります。

変形効果: この種の変形を作成するには、border-radius の値を変更するだけです。

@keyframes pac_ball {  100% {
        right: 55%;
      }}

ログイン後にコピー

平らな楕円を作成し、ボックスシャドウを作成して影効果を追加し、適切なタイミングでサイズを変更すると、影の効果がさらに向上します。

@keyframes beat_ball {  25% {
        transform: translateY(25%) rotate(22.5deg);//下落border-bottom-right-radius: 10%;
      }  50% {border-bottom-right-radius: 100%;transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale，是为了让形变看起来有弹性      }  75% {transform: translateY(25%) rotate(67.5deg)   //上升      }  100% {transform: translateY(0) rotate(90deg)        //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可      }}

ログイン後にコピー

27、効果27

divと疑似クラスが作成されます。

div は回転を担当し、擬似クラスは高さの変更を担当します。それぞれが独自の役割を果たします。

@keyframes beat_shadow {  50%{
        transform: scale(1.25,0.8);
      }}

ログイン後にコピー

28、効果28

時計の効果（私の位置が真ん中ではないようです）の効果時計のみが使用されます。キーフレームアニメーションは 360 度回転するだけで、2 つのポインターのアニメーションの移動時間を変更するだけです。

@keyframes locker_ball {           //div旋转
      25%{
        transform: rotateZ(180deg);
      }  50%{transform: rotateZ(180deg);
      }  75%{transform: rotateZ(360deg);
      }  100%{transform: rotateZ(360deg);
      }}
    @keyframes locker_ballh {     //伪类高度改变
      25%{
        height: 40px;
      }  50%{height: 0;
      }  75%{height: 0;
      }  100%{height: 40px;
      }}

ログイン後にコピー

この一連のアニメーションでは、一部の一時停止効果は、特定のパーセンテージから特定のパーセンテージまで状態を維持するためにキーフレームコントロールによって実現されますが、その他はモーションカーブイージングによって実現されます。

お花で終わり〜週末を過ごしましょう〜

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