CSSオリンピックリング

この記事は、2020年のプロジェクトを再検討しています。3Dオリンピックリングのアニメーション。 元のSCSSコードは機能的ですが、最新の効率が欠けていました。この更新されたバージョンでは、純粋なCSSを使用して、よりクリーン、より簡潔なコードのために三角関数と相対色の構文を活用します。 結果は、よりパフォーマンスが高くエレガントなソリューションです。

3D効果は、層状divを使用して達成されます。各リングは16の層で構成され、それぞれが照明効果を作成するためのわずかに異なるシェードです。 レイヤーのサイズと位置は、3次元リングの錯覚を作成します。

html構造

HTMLは、レイヤーを表す16個のネストされた

要素を含む5つの要素（1つのリングごと）で構成されています。 それぞれの

要素は、CSSを介したスタイリングを制御するために、カスタムプロパティ<div>（1〜16の範囲）を使用します。 エメットは、繰り返しのHTML構造の作成を簡素化できます。 スニペットは次のとおりです <code><i></i> <i></i>--iプロパティは、層の位置、サイズ、色のCSS計算の乗数として機能します。 cssスタイリング

<div class="rings">
  <div class="ring ring__1">
    <i style="--i: 1;"></i>
    <i style="--i: 2;"></i>
    <!-- ... more layers ... -->
    <i style="--i: 16;"></i>
  </div>
  <!-- ... more rings ... -->
</div>

--iコンテナは

を使用して、絶対に配置されたリングを含みます。 それぞれ

は絶対に配置されており、その

子どもたちは絶対的な位置を継承します。

円形の形状を作成します。 カスタムプロパティ.ringsは、ベースカラーを設定します。position: relative .ringマイナス値に設定された<i></i>プロパティは、レイヤーを要素の外側の外側に配置し、そのサイズを効果的に定義します。 border-radius: 50%カスタムプロパティ、--ringColorを使用して計算され、Z軸に沿って層を配置して深さを作成します。

相対色の構文を使用した

シェーディングinset .ring相対色の構文を使用してシェーディングが達成されます。 --translateZから計算されたカスタムプロパティは、--i：

の軽さを変更します

.ring {
  position: absolute;
  --ringColor: #0085c7;
  i {
    position: absolute;
    inset: -100px;
    border-radius: 50%;
    --translateZ: calc(var(--i) * 2px);
    transform: rotateY(-45deg) translateZ(var(--translateZ));
  }
}

これにより、レイヤーが背面に向かって動的に暗くなり、3D効果が向上します。 アウトラインが追加され、リングの内側と外側の両方のエッジの両方にシェーディングが表示されるようにします。

shaping and animation

--light--i関数を使用して計算されたカスタムプロパティは、境界の厚さを決定し、リングの円形を作成します。 --ringColor

アニメーションは、

i {
  --light: calc(var(--i) / 16);
  --layerColor: rgb(from var(--ringColor) calc(r * var(--light)) calc(g * var(--light)) calc(b * var(--light)));
  border: var(--size) var(--layerColor) solid;
  outline: var(--size) var(--layerColor) solid;
}

および

プロパティを使用して実装されています。 各リングのアニメーション期間は、アニメーションを驚かせるために負の遅延があるカスタムプロパティ

によって制御されます。

最終的なタッチと最適化

.ringsコンテナのわずかなx軸回転は、視点を追加します。 擬似エレメント（::after）ぼやけた影を作成し、3D効果をさらに高めます。 最終的なCSSは高度に最適化され、再利用可能であり、最新のCSS機能の力を示しています。 このコードは、元のSCSSバージョンよりもはるかに効率的で保守可能です。