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

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

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

#イレブン、エフェクトイレブン

# #4 つの小4 つの四角形 p にそれぞれボールが含まれます。四角形 p を基準にして、小さなボールがそれぞれ 4 隅に位置するように回転を設定します。小さなボールを制御するフレーム アニメーションです。ボールは現在位置と中心点に近い位置の間を往復します。

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

の親要素に引き継がれる回転効果がまだ残っています。正方形 p

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
      25%{
        transform: rotateZ(90deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(270deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

12、効果 12

##この効果を実現することは、各小さなボールの位置を修正し、小さなボールの透明度を変更することは難しくありません (各小さなボールには異なるアニメーション時間を設定する必要があります)

@keyframes mar_ligt {
      50%{
        opacity: 0.4;
      }
    }

# 13、効果 13

##まだ小さなボールが 9 個ありますが、ボールのサイズが異なります。サイズの変更による組版を防ぐために、ここでは変更されています。混乱を招くため、各ボールは固定の幅と高さで p に含まれ、ボールは常に p の水平方向と垂直方向の中心に配置されます。 。このようにして、ボールのサイズを安全に変更できます (各ボールは異なるアニメーション時間に設定されたままです)

@keyframes mar_ligts {
      50%{
        transform: scale(.5);
        opacity: 0.4;
      }
    }

Fourteen、Effect Fourteen

ビリヤード効果、4 つの小さなボールが中央に水平方向と垂直方向に配置され、中央の 2 つの小さなボールは配置されません。移動すると、左右の小さなボールが動きます。 ボールが両側を往復します（移動の時間差に注意してください）。

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {
      25%{
        transform: translateX(-100%);
      }
      50%{
        transform: translateX(0);
      }
    }
    @keyframes poolball_r {
      25%{
        transform: translateX(100%);
      }
      50%{
        transform: translateX(0);
      }
    }

15、効果 15

##これ同様に、ボールのサイズの変更によってページ レイアウトが乱れることを防ぐために、幅と高さが固定された p のレイヤーがボールの外側に追加されます。 各ボールのアニメーション遅延も設定します

{animation: size_change 1.2s linear infinite;}@keyframes size_change {
      20%{
        width: 0;
        height: 0;
      }
      40%{
        width: 0;
        height: 0;
      }
      50%{
        width: 20px;
        height: 20px;
      }
    }

16 エフェクト 16

5 つの小さなボールを水平方向に中央に配置し、マージンを使用してボール間の距離を広げ、キーフレーム アニメーションを通じてボールの移動 Y、幅、高さ、および幅を変更します。透明性。 ボールの初期の幅と高さは 15 ピクセル、透明度は 0.6 です。 rreeee続きます!

今日はここで共有しますが、後ほどさらに公開する予定です。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

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

、

CSS3 ビデオ チュートリアル

、

bootstrap チュートリアル

をご覧ください。

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