Wie man ein CSS in 3D Slinky Slinky macht

Braydon Coyer startete eine monatliche CSS Art Challenge und lud mich ein, mein Buch Move Things mit CSS als Preis zu spenden. Das Thema des ersten Monats ist "Spring", das mich sofort an das Frühlingsspielzeug erinnert - Slinky.

In diesem Artikel wird untersucht, wie CSS verwendet werden, um 3D -Effekte zu erstellen, die die Bewegung von Slinky im Erdgeschoss simulieren.

Slinkys HTML -Struktur

Um das Verhalten von Slinky flexibel zu kontrollieren, verwenden wir CSS, um Eigenschaften anzupassen. Hier ist die HTML -Struktur in Mops:

 - const ring_count = 10;
.Container
  .Szene
    .Plane (style = `-Ring-Count: $ {RING_COUNT}`)
      - lass Ringe = 0;
      Während Ringe <ring_count .ring><p> Das von diesem Code generierte HTML enthält 10 Ringelemente, jeweils das Attribut <code>--index</code> , um seinen Index darzustellen. </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> Slinkys anfänglicher CSS -Stil</h3>
<p> Wir brauchen eine 3D -Szene. Der folgende CSS -Code definiert die Eigenschaften von Slinky und seine Szenarien:</p>
<pre class="brush:php;toolbar:false"> :Wurzel {
  --Größenbreite: 1,2 VMin;
  -Tiefe: 20Vmin;
  -Stapelhöhe: 6vmin;
  -Szenengröße: 20VMin;
  -Ringgröße: Calc (var (-Szenengröße) * 0,6);
  -plan: radial gradient (rgb (0 0 0 / 0,1) 50%, transparent 65%);
  -Ring-Shadow: RGB (0 0 0 / 0,5);
  -----eins: 320;
  ----zwei: 210;
  -Blur: 10px;
  -Geschwindigkeit: 1,2s;
  --BG: #fafafa;
  -Ringfilter: Helligkeit (1) Drop-Shadow (0 0 0 var (-Akzent));
}

* {{
  Kastengrößen: Border-Box;
  Transform-Stil: Preserve-3d;
}

.Container {
  Höhe: var (-Szenengröße);
  Breite: var (-Szenengröße);
  verwandeln:
    translate3d (0, 0, 100vmin)
    rotatex (-24deg) rotatey (32deg)
    rotatex (90de)
    TranslateZ (Calc ((var (-Tiefe)) var (-Stapelhöhe) * -1))
    drehen (0deg);
}

.Szene,
.Flugzeug {
  Höhe: 100%;
  Breite: 100%;
  Position: Relativ;
}

.Flugzeug {
  Transformation: TranslateZ (var (-Tiefe));
}

Die Transformation von .container besteht aus mehreren Schritten, die letztendlich die Szene drehen und lokalisiert.

Slinky Ringstil

Der folgende CSS-Code verwendet benutzerdefinierte Eigenschaften --index und --ring-count um jeden Ring zu lokalisieren:

 .Ring {
  -Origin-Z: Calc (var (-Stack-Height)-(var (-Stack-Height) / var (-Ring-Count)) * var (-index));
  --Hue: var (-hue-one);
  -Accent: HSL (var (-Hue) 100% 55%);
  Höhe: var (-Ringgröße);
  Breite: var (-Ringgröße);
  Grenzradius: 50%;
  Grenze: var (-Grenzbreit) Solid var (-Akzent);
  Position: absolut;
  Top: 50%;
  Links: 50%;
  Transform-Origin: CALC (100% (var (-Szenengröße) * 0,2)) 50%;
  Transformation: Translate3D (-50%, -50%, var (-Origin-z)) TranslateZ (0) Rotatey (0deg);
}

.Ring: N-vom-Typ (ungerade) {
  --Hue: var (-hue-two);
}

--origin-z berechnet die Anfangsposition jedes Rings auf der Z-Achse, und transform lokalisiert und dreht den Ring.

Slinky Ring Transformation und Animation

Um die Flip- und Herbsteffekte von Slinky zu erreichen, müssen wir die Ziel-Z-Axis-Position jedes Rings --destination-z . 3D CSS Slinky Effekt. Die Einschränkungen der CSS -Animation und die Vorteile von JavaScript -Animationsbibliotheken wie Greensock werden ebenfalls diskutiert.

Zusammenfassen

In diesem Artikel werden im Detail den komplexen Prozess der Verwendung von reinem CSS zum Erstellen von 3D -konfigurierbaren Slinky -Effekten, die HTML -Strukturen, CSS -Stile, Animationsimplementierungen und die Verwendung des Preprozessorstilus erstellen. Die Einschränkungen und Verbesserungsvorschläge der CSS -Animation werden ebenfalls im Artikel erörtert. Der endgültige Effekt ist eine konfigurierbare, anpassbare 3D -Slinky -Animation.

Das obige ist der detaillierte Inhalt vonWie man ein CSS in 3D Slinky Slinky macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!