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

以前に 22 個の効果を含む 4 つの記事を投稿しました。この記事では、6 種類の CSS3 ページ読み込みアニメーション効果、合計 28 個のページ読み込みアニメーション効果を紹介します。困っている友人は参考にしていただければ幸いです。

前回の記事 [CSS3 学習ページの読み込みアニメーション (4)] では、さらに 6 つの CSS3 読み込みアニメーションを共有しましたが、今日も引き続き共有します (タイトルは前回の記事からの続きです)前回）。

#23、効果は 23

##最初は 2 つの四角形が左上に配置されます (上: 0; 左: 0;)。

完全な動きは 4 つの段階に分かれています。最初の段階では、左上が右上に移動します。 90°回転して幅と高さが減少します。第 2 段階では右上が右下に移動し、180 度回転して幅と高さが元に戻ります。左下に移動し、270 度回転し、4 段階目で幅と高さが減少します。左下。 左上に移動し、360 度回転し、幅と高さを元に戻します。

アニメーション遅延時間の差は、アニメーション時間のマイナスの半分です。

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
      25% {
        -webkit-transform: scale(.5) rotateZ(90deg);
        transform: scale(.5) rotateZ(90deg);
        top: 0;
        left: 100%;
      }
      50% {
        -webkit-transform: scale(1) rotateZ(180deg);
        transform: scale(1) rotateZ(180deg);
        top: 100%;
        left: 100%;
      }
      75% {
        -webkit-transform: scale(.5) rotateZ(270deg);
        transform: scale(.5) rotateZ(270deg);
        top: 100%;
        left: 0;
      }
      100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
        top: 0;
        left: 0;
      }
    }

24、効果 24

##炎の鼓動効果と同様に、3 つの正方形の p を中央に水平に、垂直に下部に配置し、初期の幅と高さを 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;
      }
    }

25、効果 25

##これは、私が子供の頃にプレイしたゲーム - パックマンに非常に似ています。左側のパックマンの作品: 2 つの p の幅と高さは 0 で、 border を設定し、右側のボーダーの color 属性を transparent に設定すると、コードと効果は次のとおりです。

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

パックマンの口が残り 2 つ作成されました。 Z 軸の正転と Z 軸の逆転が 1 つあり、軸が回転して食べる動作が行われます。

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

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

# 26、効果 26

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

@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°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可      }
    }

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

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

27、効果は 27

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

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

@keyframes locker_ball {           //p旋转
      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;
      }
    }

28、効果 28

#時計の効果 (私の位置は中央ではないようです)

時計の効果は、1 つのキーフレーム アニメーションだけを使用して実現できます。これは、360 度回転し、位置を変更するだけです。 2つのポインタのうち、アニメーションの移動時間は十分です。

@keyframes clock {
      100%{
        transform: rotateZ(360deg);
      }
    }

この一連のアニメーションでは、一部の一時停止効果は、特定の割合から一定の割合まで状態を維持するキー フレーム コントロールによって実現されますが、その他の一時停止効果はモーション カーブ イージングによって実現されます。 お花を添えて完成です！このシリーズが皆さんの学習に役立つことを願っています。その他の関連チュートリアルについては、 CSS 基本ビデオ チュートリアル

、

CSS3 ビデオ チュートリアル

、

bootstrap チュートリアル

をご覧ください。

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