CSS奧林匹克環

>本文重新審視了一個2020年的項目：動畫3D奧林匹克環。 原始的SCSS代碼雖然功能性，但缺乏現代效率。此更新的版本使用純CSS，利用三角函數和相對顏色語法，以清潔，更簡潔的代碼。 結果是一個更具性能和優雅的解決方案。

使用分層divs實現3D效果。每個戒指都包含16層，每個環都有略有不同的陰影，以產生照明效果。 層的大小和定位產生了三維環的幻覺。 元素組成（一個元素），每個元素包含16個代表層的嵌套元素。 每個

元素使用自定義屬性<div>（從1到16不等）通過CSS控制其樣式。 EMMET可以簡化創建重複的HTML結構。 這是一個片段：<code><i></i> <i></i> --i屬性用作層，大小和顏色的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>

> CSS樣式

--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效果。 添加輪廓以確保在環的內邊緣和外部邊緣可見陰影。 >

塑形和動畫

--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）會產生模糊的陰影，進一步增強3D效果。 最終的CSS是高度優化和重複使用的，展示了現代CSS功能的力量。 該代碼比原始SCSS版本要高得多和可維護。 >