CSS3学習ページ読み込みアニメーション(4)-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2018-10-15 16:26:28

転載

2150 人が閲覧しました

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

前回の記事 [CSS3 学習ページの読み込みアニメーション (3)] で、さらに 6 つの CSS3 読み込みアニメーションを共有しました (タイトルは前回からの続きです)。時間）実際にはそうではありません。

#セブンティーン、エフェクトセブンティーン

# #3 つの小さなボールを垂直方向に中央に配置し、広い間隔で配置するには、小さなボールのtranslateY値を順番に変更するだけです。

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

ログイン後にコピー

18、効果 18

水平方向と垂直方向の中心にある 3 つの小さなボールは、外側のマージンを使用してボール間の距離を広げます。この効果から、左右の 2 つの小さなボールが中央のボールの周りを円運動します。ボールの親要素を直接回転させて、両側のボールの周囲の効果を実現できます (親要素が回転すると、形状が丸いため、中央のボールが回転しているように見えず、位置が変わります)中央は変更されません。視覚的には、中央のボールはまったく変更されていません）。

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

ログイン後にコピー

19、効果 19

合計 5 つの小ボールは同じアニメーションを実行しますが、各小ボールのアニメーションの遅延時間が異なるため、5 つの小ボールを同じ位置に配置します。統一された開始点 (ここでは、5 つのボールを右端に配置しました)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点，开始返回起点      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

ログイン後にコピー

20、効果 20

小さなボールは合計 8 つあり、小さなボールの幅と高さを変更するだけです。、小さなボールは円の中心を基準に変更する必要があります)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

ログイン後にコピー

(ボールの 50% ～ 80% は幅と高さを 0 に維持し、半分が表示され、半分が非表示になる効果を形成します) )

#21. 効果 21

#それぞれの小さなボールは合計3つです。移動軌跡は同じです。ここでは、3つの小さなボールの中心を縦の上と横の中心に配置し、最初は下に、3段階に移動させます。右コーナー、左下コーナーと進み、最後にスタート地点に戻りました。 (各ステージ中盤付近の時点で透明度変化が追加されます)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

ログイン後にコピー

#22、エフェクト22

これは回転する歯車と同じで、歯車の形をどう作るかがポイントです。境界線は内側に円形に作成され、疑似クラスの点線の境界線は外側の鋸歯状に作成されます。疑似クラスの境界線が広いほど、鋸歯状の部分は疎になります。また、その逆も同様です。歯車が完成したら、残るは小さな回転ケースだけです。

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

ログイン後にコピー

今日の分かち合いは終わりました、後でまた波があり、花で終わります。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

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

、

CSS3 ビデオチュートリアル

、

bootstrap チュートリアルをご覧ください。

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