単一要素ローダー：ドット-CSSチュートリアル-php.cn

単一要素ローダー：ドット

Jennifer Aniston

リリース： 2025-03-13 11:39:10

オリジナル

577 人が閲覧しました

単一要素ローダー：ドット

この記事では、単一のdiv要素を使用してロードアニメーションの作成を調べます。すでに回転ローダーを分析しています。それでは、別のおなじみのアニメーション、ドットに取り組みましょう。

ドットローダーは遍在しています。彼らの魅力は、彼らのシンプルさにあります：3つのドットは、テキストの楕円に似た（…）、動的な視覚シーケンスを実行します。

シリーズの概要

単一要素ローダー：スピナー
単一要素ローダー：ドット -現在の記事
単一要素ローダー：バー
単一要素ローダー：3Dに進みます

私たちの目的は、このアニメーションを1つのDIVのみを使用して複製し、ドットあたりの個々のDIVまたは個別のアニメーションの必要性を排除することです。上記の例は、単一のdiv、CSS、および擬似要素を使用してこれを実現し、背景とマスクのテクニックを巧みに組み合わせています。色を変えるドットの錯覚は、背景勾配をアニメーション化することによって作成されます。

背景をアニメーション化します

背景アニメーションから始めましょう：

 .loader {
  幅：180px;
  アスペクト比：8/5;
  背景： 
    conic勾配（赤50％、青0）ノーリピート、 
    円錐勾配（緑の50％、紫0）繰り返し。
  バックグラウンドサイズ：200％50％; 
  アニメーション：バック4S Infinite Linear;
}

@KeyFramesバック{
  0％、100％{バックグラウンドポジション：0％0％、0％100％; }
  25％{バックグラウンドポジション：100％0％、0％100％; }
  50％{バックグラウンドポジション：100％0％、100％100％; }
  75％{バックグラウンドポジション：0％0％、100％100％; }
}

ログイン後にコピー

180px全体の.loader要素には、シャープな色の遷移がある2つの円錐形の勾配が表示されます。上半分は赤と青、下半分の緑と紫を使用します。 200％の幅により、各半分に一度に1色のみが表示されることが保証されます。アニメーションは位置を循環し、色の変化の幻想を生み出します。

background-positionをより深く理解するには、このスタックオーバーフロー回答を参照してください。アニメーションは、勾配のxおよびy座標を巧みに操作します。

linear-gradient() conic-gradient() gradient（）がなぜですか？

conic-gradient()を使用することはより簡潔で、同じ結果を達成します。

アニメーションのタイミング関数をlinearからsteps(1)に調整することにより、色の点滅を排除します。

ドットを作成します

前の記事と同様に、 CSSマスクを利用します。マスクにより、背景の一部を選択的に明らかにすることができます。ここでは、ドットを作成し、それらを通して背景勾配を明らかにします。

radial-gradient()を使用します。

 .loader {
  / * ...以前のスタイル... */
  -_ g：radial-gradient（＃000 68％、＃0000 71％）繰り返し。
  マスク：var（--_ g）、var（--_ g）、var（--_ g）;
  マスクサイズ：25％40％;
}

ログイン後にコピー

CSS変数--_gは、コードを簡素化します。 3つの放射状勾配がドットを作成します。

これで、ドットを移動するアニメーションが必要です。

 .loader {
  / * ...以前のスタイル... */
  アニメーション：2S Infiniteをロードします。
}

@KeyFramesロード{
  0％、100％{マスクポジション：0％0％、50％0％、100％0％; }
  16.67％{マスクポジション：0％100％、50％0％、100％0％; }
  33.33％{マスクポジション：0％100％、50％100％、100％0％; }
  50％{マスクポジション：0％100％、50％100％、100％100％; }
  66.67％{マスクポジション：0％0％、50％100％、100％100％; }
  83.33％{マスクポジション：0％0％、50％0％、100％100％; }
}

ログイン後にコピー

このアニメーションは、各ドットのmask-positionのY座標を調整し、上下の動きを作成します。これをグラデーションアニメーションと組み合わせると、最終効果が生成されます。

バリエーションとその他の例

CSS変数により、色とサイズの調整が簡単になります。キーフレームを変更することで、さまざまなアニメーションを作成することもできます。シングルドットローダーやブロブビーエフェクトローダーなど、さらなる例がこちらでご利用いただけます。 CSSグリッドアプローチも表示され、サイジングとポジショニングを簡素化します。