CSS Olimpik Cincin

Artikel ini mengkaji semula projek 2020: Animasi cincin Olimpik 3D. Kod SCSS yang asal, sementara berfungsi, tidak mempunyai kecekapan moden. Versi terkini ini menggunakan CSS tulen, memanfaatkan fungsi trigonometri dan sintaks warna relatif untuk kod yang lebih bersih dan lebih ringkas. Hasilnya adalah penyelesaian yang lebih berprestasi dan elegan.

Kesan 3D dicapai dengan menggunakan div berlapis. Setiap cincin terdiri daripada 16 lapisan, masing -masing teduh yang sedikit berbeza untuk menghasilkan kesan pencahayaan. Saiz dan kedudukan lapisan membuat ilusi cincin tiga dimensi.

struktur html

HTML terdiri daripada lima elemen

(satu per cincin), masing -masing mengandungi 16 unsur bersarang yang mewakili lapisan. Setiap elemen <div> menggunakan harta tersuai <code><i></i> (antara 1 hingga 16) untuk mengawal gaya melalui CSS. Emmet dapat memudahkan mewujudkan struktur HTML berulang. Berikut adalah coretan: <i></i> --i harta berfungsi sebagai pengganda dalam pengiraan CSS untuk kedudukan lapisan, saiz, dan warna.

<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 Styling --i

menggunakan kontena

untuk mengandungi cincin yang benar -benar diposisikan. Setiap

benar -benar diposisikan, dan kanak -kanaknya mewarisi kedudukan mutlak. .rings mencipta bentuk bulat. Hartanah tersuai position: relative menetapkan warna asas. .ring <i></i> harta , ditetapkan kepada nilai negatif, meletakkan lapisan di luar elemen border-radius: 50%, dengan berkesan menentukan saiznya. Hartanah tersuai --ringColor, dikira menggunakan

, lapisan kedudukan di sepanjang paksi z untuk membuat kedalaman:

inset .ring teduhan dengan sintaks warna relatif --translateZ --i Shading dicapai menggunakan sintaks warna relatif. A

harta tersuai, dikira dari

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

, mengubah cahaya

:

--light Lapisan dinamik ini dinamik ke arah belakang, meningkatkan kesan 3D. Garis besar ditambah untuk memastikan teduhan dapat dilihat pada kedua -dua bahagian dalam dan luar cincin. --i --ringColor membentuk dan animasi

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

Hartanah Custom

, dikira menggunakan fungsi

, menentukan ketebalan sempadan, mewujudkan bentuk bulat cincin:

animasi dilaksanakan menggunakan --size dan harta . Tempoh animasi setiap cincin dikawal oleh harta tersuai sin(), dengan kelewatan negatif untuk mengejutkan animasi.

sentuhan akhir dan pengoptimuman

Putaran paksi X sedikit pada bekas .rings menambah perspektif. Pseudo-Elements () mencipta bayang-bayang kabur, meningkatkan lagi kesan 3D. CSS akhir sangat dioptimumkan dan boleh diguna semula, menunjukkan kuasa ciri CSS moden. Kod ini jauh lebih cekap dan boleh dipelihara daripada versi SCSS asal. ::after