アニメーション コレクションの読み込み中

4 つの小さなボールがそれぞれ 4 つの正方形 div に含まれています (上: 0、左: 0) ように、正方形 div を回転するように設定します。小さなボールがそれぞれ四隅に配置され、キーフレーム アニメーションを使用してボールが現在位置と中心点に近い位置の間を往復するように制御されます

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

まだ回転効果が残っています、これは正方形の div の親要素に任せます

{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);
      }}

この効果を達成するのは難しいことではありません。9 つのボールの位置を固定し、ボールの透明度 (それぞれ) を変更するだけです。ボールには別のアニメーション時間を設定する必要があります)

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

まだ 9 つの小さなボールがありますが、レイアウトが崩れるのを防ぐために、ここでは小さなボールのサイズが変更されています。サイズの変化により無秩序になるため、各小さなボールは固定の幅と高さを持つ div に含まれ、ボールは常に div の水平方向と垂直方向の中心に配置されます。このようにして、ボールのサイズを安全に変更できます (各ボールは異なるアニメーション時間で設定されたままです)

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

ビリヤード効果、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);
      }}

5つの小さなボールを水平方向に中央に配置し、外側のマージンを使用してボール間の距離を広げます。キーフレームアニメーションによるボールのtranslateY、幅、高さ、透明度。

ボールの初期の幅と高さは 15 ピクセル、透明度は 0.6 です。

りー

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