Cara membuat css slinky dalam 3d

Braydon Coyer melancarkan cabaran seni CSS bulanan dan menjemput saya untuk mendermakan buku saya dengan CSS sebagai hadiah. Tema bulan pertama ialah "Spring", yang segera mengingatkan saya tentang mainan musim bunga - Slinky.

Artikel ini akan meneroka cara menggunakan CSS untuk membuat kesan 3D yang mensimulasikan pergerakan bawah Slinky.

Struktur HTML Slinky

Untuk mengawal tingkah laku Slinky secara fleksibel, kami akan menggunakan CSS untuk menyesuaikan sifat. Inilah struktur HTML yang ditulis dalam PUG:

 - const ring_count = 10;
.container
  .scene
    .plane (style = `--ring-count: $ {ring_count}`)
      - biarkan cincin = 0;
      sementara cincin <ring_count .ring><p> HTML yang dihasilkan oleh kod ini mengandungi 10 elemen cincin, masing -masing dengan atribut <code>--index</code> untuk mewakili indeksnya. </p>
<p></p>
<div><div><div style="--ring-count: 10">
<div style="--index: 0;"></div>
<div style="--index: 1;"></div>
<div style="--index: 2;"></div>
<div style="--index: 3;"></div>
<div style="--index: 4;"></div>
<div style="--index: 5;"></div>
<div style="--index: 6;"></div>
<div style="--index: 7;"></div>
<div style="--index: 8;"></div>
<div style="--index: 9;"></div>
</div></div></div>
<h3> Gaya CSS awal Slinky</h3>
<p> Kami memerlukan adegan 3D. Kod CSS berikut mentakrifkan sifat Slinky dan senario:</p>
<pre class="brush:php;toolbar:false"> : root {
  -Border-lebar: 1.2vmin;
  -depth: 20vmin;
  -Stack-height: 6vmin;
  -Scene-Size: 20Vmin;
  -saiz saiz: calc (var (-saiz adegan) * 0.6);
  --Plane: Radial-Gradient (RGB (0 0 0 / 0.1) 50%, telus 65%);
  --shadow: RGB (0 0 0 / 0.5);
  --Hue-One: 320;
  --hue-dua: 210;
  --Blur: 10px;
  -kelajuan: 1.2s;
  --bg: #fafafa;
  -Filter: kecerahan (1) drop-shadow (0 0 0 var (-aksen));
}

* {
  saiz kotak: kotak sempadan;
  gaya transform: Preserve-3D;
}

.container {
  ketinggian: var (-saiz adegan);
  lebar: var (-saiz adegan);
  Transform:
    Terjemahan3D (0, 0, 100Vmin)
    RotateX (-24Deg) berputar (32deg)
    RotateX (90deg)
    translateZ (calc ((var (-kedalaman) var (-stack-height)) * -1))
    berputar (0deg);
}

.scene,
.plane {
  Ketinggian: 100%;
  Lebar: 100%;
  Kedudukan: Relatif;
}

.plane {
  transform: translateZ (var (-kedalaman));
}

Transformasi .container terdiri daripada pelbagai langkah, yang akhirnya berputar dan menempatkan tempat kejadian.

Gaya cincin slinky

Kod CSS berikut menggunakan sifat tersuai --index dan --ring-count untuk mencari setiap cincin:

 .ring {
  --origin-z: calc (var (-stack-height)-(var (-stack-height) / var (-cincin count)) * var (-index));
  --hue: var (-hue-one);
  -Akal: HSL (var (-Hue) 100% 55%);
  ketinggian: var (-saiz cincin);
  lebar: var (-saiz cincin);
  Radius sempadan: 50%;
  sempadan: var (-lebar sempadan) var pepejal (-aksen);
  Kedudukan: Mutlak;
  Atas: 50%;
  Kiri: 50%;
  Transform-Origin: Calc (100% (var (-saiz adegan) * 0.2)) 50%;
  Transform: Translate3D (-50%, -50%, var (-Origin-Z)) TranslateZ (0) Rotatey (0Deg);
}

.ring: nth-of-type (ganjil) {
  --hue: var (-hue-dua);
}

--origin-z mengira kedudukan awal setiap cincin pada paksi z, dan sifat transform mengesan dan memutar cincin.

Transformasi dan Animasi Cincin Slinky

Untuk mencapai kesan flip dan kejatuhan slinky, kita perlu mengira kedudukan paksi z sasaran setiap cincin --destination-z , dan menggunakan animasi untuk mengawal transformasi: (langkah-langkah berikutnya ditinggalkan, kerana panjangnya, CSS 3D CSS kesan slinky. Keterbatasan animasi CSS dan kelebihan perpustakaan animasi JavaScript seperti Greensock juga dibincangkan.

Meringkaskan

Artikel ini menerangkan secara terperinci proses kompleks menggunakan CSS tulen untuk menghasilkan kesan slinky yang boleh dikonfigurasikan 3D, yang meliputi struktur HTML, gaya CSS, pelaksanaan animasi, dan penggunaan stylus preprocessor. Batasan dan cadangan penambahbaikan animasi CSS juga dibincangkan dalam artikel tersebut. Kesan akhir adalah animasi slinky 3D yang boleh dikonfigurasikan dan disesuaikan.

Atas ialah kandungan terperinci Cara membuat css slinky dalam 3d. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!