シングルエレメントローダー：3Dになります！-CSSチュートリアル-php.cn

シングルエレメントローダー：3Dになります！

Lisa Kudrow

リリース： 2025-03-11 11:20:11

オリジナル

1017 人が閲覧しました

シングルエレメントローダー：3Dになります！

シングルエレメントローダーシリーズのこの最終記事では、3Dデザインを探ります。 HTML要素が1つだけで説得力のある3Dキューブを作成することは不可能に思えますが、目に見える3つの面のみを巧みにレンダリングすることで、キューブのような効果を達成できます。それを作りましょう！

シリーズの要約

単一要素ローダー：スピナー
単一要素ローダー：ドット
単一要素ローダー：バー
単一の要素ローダー：3Dになります -あなたはここにいます

スプリットキューブローダー

このローダーは、2つのキューブ分割を描写しますが、単一のHTML要素のみを使用します。各半分は、擬似要素（ ::beforeと::after ）を使用して作成されます。

魔法は、円錐勾配、CSS clip-path 、および負のマージンを組み合わせることにあります。円錐形の勾配は顔を色付けし、 clip-pathを形成し、マイナスマージンは擬似要素と重なり、完全なキューブをシミュレートします。アニメーションは、ローダーを実現します。

視覚的表現は、 clip-path計算を明確にします：（図は元と同様にここに配置されます）

コーディングしましょう。まず、 .loader要素を設定します。

 .loader {
  -S：150px; / *サイズコントロール */
  -_ d：calc（0.353 * var（ -  s））; / * 0.353 = sin（45deg）/2 */

  幅：calc（var（ -  s）var（--_ d））;
  アスペクト比：1;
  ディスプレイ：Flex;
}

ログイン後にコピー

次に、擬似要素：

 .Loader ::前、
.loader ::後{
  コンテンツ： "";
  フレックス：1;
}

ログイン後にコピー

円錐勾配を適用します：

 .Loader ::前、
.loader ::後{
  背景：conic-勾配（-90deg at calc（100％-var（--_ d））var（-_ d）、#fff 135deg、＃666 0 270deg、＃aaa 0）;
}

ログイン後にコピー

勾配をクリップします：

 .Loader ::前、
.loader ::後{
  クリップパス：ポリゴン（var（--_ d）0、100％0、100％calc（100％-var（--_ d））、calc（100％-var（--_ d））100％、0 100％、0 var（-_ d））;
}

ログイン後にコピー

負のマージンを使用して半分に重なります：

 .loader :: before {margin-right：calc（var（--_ d） / -2）; }
.loader :: afted {margin-left：calc（var（--_ d） / -2）; }

ログイン後にコピー

最後に、アニメーション：

 .Loader ::前、
.loader ::後{
  アニメーション：1.5Sの無限のキュービックベジエ（0、.5、.5、1.8）をロードします。
}
.loader :: after {animation -delay：-.75s; }

@KeyFramesロード{
  0％、40％{変換：translatey（calc（var（ -  s） / -4））; }
  60％、100％{transform：translatey（calc（var（ -  s） / 4））; }
}

ログイン後にコピー

（最後のデモはここに表示されます）

Progress Cube Loader

この手法を3D Progress Loaderに適応させましょう。キューブシミュレーションは同じままですが、高さとアスペクトの比率を調整します。アニメーションはflex-grow: 1巧みに使用して、左側の幅が増加するにつれて残りのスペースを埋めます。

右側に透明性を追加します。

 .loader :: after {ofacity：0.4; }

ログイン後にコピー

background-colorとbackground-blend-modeを使用して、左側の色を変更します。

 .loader :: before {
  バックグラウンドカラー：＃CC333F;
  Background-Blend-Mode：乗算;
}

ログイン後にコピー

左側の幅をアニメーション化します：

 @KeyFramesロード{
  0％、5％{width：var（--_ d）; }
  95％、100％{幅：100％; }
}

ログイン後にコピー

（下面の問題に対処するために、改善されたデモがここに示されます）

下面の修正を含む完全なコード：（完全なコードがここに含まれます）

（オリジナルと同様に、さらに3Dの例と説明が続き、画像の配置とフォーマットを維持します）

これは、最小限のマークアップで複雑な効果を生み出すCSSの力を示しています。実験して独自のバリエーションを作成してください！

以上がシングルエレメントローダー：3Dになります！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。