Erstellen des digitaloceanischen Logos in 3D mit CSS

Grüß dich! Wenn Sie nicht unter einem Felsen gelebt haben (und vielleicht sogar damals), haben Sie zweifellos die Nachricht gehört, dass CSS-Tricks von Digitalocean erworben wurden. Herzlichen Glückwunsch an alle! ?

Als kleines Hurra zum Gedenken an den Anlass wollte ich das digitaloceanische Logo in CSS erstellen. Ich habe das getan, aber mit etwa 3D und Parallaxe ein wenig weiter. Dies sorgt auch für einen guten Artikel, da die Art und Weise, wie ich das Logo gemacht habe, verschiedene Stücke aus früheren Artikeln verwendet, die ich geschrieben habe. Diese coole kleine Demo bringt viele dieser Konzepte zusammen.

Also, lass uns gleich reintauchen!

Erstellen des digitaloceanischen Logos

Wir werden das digitaloceanische Logo „verfolgen“, indem wir eine SVG -Version von Simpleicons.org ergriffen.

 <svg rollen="img" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title> digitalocean </title>
  <pfad d="M12.04 0C5.408-.02.005 5.37.005 11.992H4.638C0-4.923 4.882-8.731 10.064-6.855A6.95 6.95 0 014.147 4.148c1.889 5.177-177. 10.064V-4,61H7.391V4.623H4.61V24C7.86 0 13.967-7.588 11.397-15.83-1115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zm7.395a12.8 12.8 0 0012.039 0zm7.395a12.8 0 0012.039 0zm7.39.8.8. 19.362H3.828V3.564H7.39ZM-3.563 0V-2.978H.85V2.978Z "> 
</pfad></svg>

Da wir uns darauf achten, dass wir diesen 3D nehmen, können wir unsere SVG in ein .Scene -Element einwickeln. Dann können wir die Tracing -Technik aus meinem Artikel „Ratschläge für fortgeschrittene CSS -Illustrationen“ verwenden. Wir verwenden Mops, damit wir seine Mixins nutzen und die Menge an Markup reduzieren können, die wir für den 3D -Teil schreiben müssen.

 - const size = 40
.Szene
  svg (rollen = 'img' viewbox = '0 0 24 24' xmlns = 'http: //www.w3.org/2000/svg'))
    Titel Digitalocean
    Pfad (d = 'M12.04 0C5.408-.02.005 5.37.005 11.992H4.638C0-4.923 4,882-8.731 10.064-6.855A6.95 6.95 0 014.147 4.148c1.889 5.177-177. 10.064V-4,61H7.391V4.623H4.61V24C7.86 0 13.967-7.588 11.397-15.83-1115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zm7.395a12.8 12.8 0 0012.039 0zm7.395a12.8 0 0012.039 0zm7.39.8.8. 19.362H3.828V3.564H7.39ZM-3.563 0V-2.978H.85V2.978z ')
  .Logo (style = `-Größe: $ {Größe}`)
    .Logo__ARC.Logo__ARC-ANNER
    .Logo__ARC.Logo__ARC-OUTER
    .Logo__Square.Logo__Square-eins
    .Logo__Square.Logo__Square-zwei
    .Logo__Square.Logo__Square-drei

Die Idee ist, diese Elemente so zu stylen, dass sie unser Logo überlappen. Wir müssen nicht den „Bogen“ -Teil des Logos erstellen, während wir vorausdenken, weil wir dieses Logo in 3D erstellen und den Bogen mit zwei Zylinderformen erstellen können. Das heißt vorerst, dass wir nur die enthaltenen Elemente für jeden Zylinder, den inneren Bogen und den äußeren Bogen benötigen.

Schauen Sie sich diese Demo an, die die verschiedenen Teile des digitaloceanischen Logos darstellt. Wenn Sie die Elemente „Explode“ und Schwebewesen umschalten, können Sie das, woraus das Logo besteht.

Wenn wir ein flaches digitaloceanes Logo wollten, könnten wir eine CSS -Maske mit einem Kegelgradienten verwenden. Dann würden wir nur ein „Bogen“ -Element brauchen, das einen festen Rand verwendet.

 .Logo__ARC-- OUTER {
  Rand: Calc (var (-Größe) * 0,1925VMin) Feststoff #006AFF;
  Maske: Conic-Gradient (transparent 0de 90 Grad, #000 90de);
  Transformation: Translate (-50%, -50%) dreht sich (180 Grad);
}

Das würde uns das Logo geben. Der „Enthüllung“ übergeht einen Clip-Pfad, der das darunter liegende SVG-Bild zeigt.

In meinem Artikel „Ratschläge für komplexe CSS -Illustrationen“ finden Sie Tipps zur Arbeit mit erweiterten Illustrationen in CSS.

Extruding für die 3D

Wir haben die Blaupause für unser digitales Logo, daher ist es Zeit, diesen 3D zu machen. Warum haben wir von Anfang an 3D -Blöcke erstellt? Das Erstellen von Elementen, die enthaltende Elemente erstellen, erleichtert das Erstellen von 3D durch Extrusion.

Wir haben mit 3D -Szenen in CSS in meinem Artikel „Lernen, in Würfeln anstelle von Boxen zu denken“ behandelt. Wir werden einige dieser Techniken für das verwenden, was wir hier machen. Beginnen wir mit den Quadraten im Logo. Jedes Quadrat ist ein Quader. Und mit PUG werden wir ein Quadermixin erstellen und verwenden, um alle von ihnen zu erzeugen.

 mixin cuuboid ()
  .Cuboid (Klasse! = Attribute.class)
    Wenn Block
      Block
    - sei S = 0
    während s <p> Dann können wir dies in unserem Markup verwenden:</p><pre rel="Pug" data-line=""> .Szene
  .Logo (style = `-Größe: $ {Größe}`)
    .Logo__ARC.Logo__ARC-ANNER
    .Logo__ARC.Logo__ARC-OUTER
    .Logo__Square.Logo__Square-eins
       cuboid (). quadratisch-cuboid.quare-cuboid-eins
    .Logo__Square.Logo__Square-zwei
       cuboid (). quadratisch-cuboid.quare-cuboid-zwei
    .Logo__Square.Logo__Square-drei
       cuboid (). quadratisch-cuboid.quare-cuboid-drei

Als nächstes brauchen wir die Stile, um unsere Quaders anzuzeigen. Beachten Sie, dass Quader sechs Seiten haben, daher stylen wir diejenigen mit dem Pseudo-Selektor vom Typ n-typen () und nutzen die VMIN-Länge, um die Dinge reaktionsschnell zu halten.

 .Cuboid {
  Breite: 100%;
  Höhe: 100%;
  Position: Relativ;
}
.Cuboid__side {
  Filter: Helligkeit (var (-b, 1));
  Position: absolut;
}
.Cuboid__side: N-vom-Typ (1) {{{
  --B: 1.1;
  Höhe: Calc (var (-Tiefe, 20) * 1VMIN);
  Breite: 100%;
  Top: 0;
  Transformation: Translate (0, -50%) rotatex (90 °);
}
.Cuboid__side: N-vom-Typ (2) {{
  --B: 0,9;
  Höhe: 100%;
  Breite: Calc (var (-Tiefe, 20) * 1VMIN);
  Top: 50%;
  Rechts: 0;
  Transformation: Translate (50%, -50%) Drehung (90 Grad);
}
.Cuboid__side: N-vom-Typ (3) {{{
  --B: 0,5;
  Breite: 100%;
  Höhe: Calc (var (-Tiefe, 20) * 1VMIN);
  unten: 0;
  Transformation: Translate (0%, 50%) rotatex (90 °);
}
.Cuboid__side: N-vom-Typ (4) {{
  --B: 1;
  Höhe: 100%;
  Breite: Calc (var (-Tiefe, 20) * 1VMIN);
  links: 0;
  Top: 50%;
  Transformation: Translate (-50%, -50%) Drehung (90 Grad);
}
.Cuboid__side: N-vom-Typ (5) {{
  --B: 0,8;
  Höhe: 100%;
  Breite: 100%;
  Transformation: Translate3d (0, 0, Calc (var (-Tiefe, 20) * 0,5 VMin));
  Top: 0;
  links: 0;
}
.Cuboid__side: N-vom-Typ (6) {{
  --B: 1,2;
  Höhe: 100%;
  Breite: 100%;
  Transformation: Translate3d (0, 0, Calc (var (-Tiefe, 20) * -0,5 VMin)) rotatey (180 Grad);
  Top: 0;
  links: 0;
}

Wir nähern uns dies auf andere Weise als in früheren Artikeln als wir es getan haben. Anstatt Größe, Breite und Tiefe auf einen Quader anzuwenden, befassen wir uns nur mit seiner Tiefe. Und anstatt zu versuchen, jede Seite zu färben, können wir Filter verwenden: Helligkeit, um das für uns zu bewältigen.

Wenn Sie als Kind einer Seite mit Filter Quader oder andere 3D -Elemente als Kind aufweisen müssen, müssen Sie möglicherweise Dinge mischen. Eine gefilterte Seite fasst alle 3D -Kinder ab.

Das Digitalocean -Logo hat drei Quaders, daher haben wir eine Klasse für jeden und stylen sie wie folgt:

 .quare-cuboid .cuboid__side {
  Hintergrund: HSL (var (-Hue), 100%, 50%);
}
.quare-cuboid-eins {
  /* 0,1925? Es ist ein Prozentsatz der -Größe für dieses Quadrat */
  -Tiefe: Calc ((var (-Größe) * 0,1925) * var (-Tiefenmultiplikator));
}
.quare-cuboid- zwei {
  -Tiefe: Calc ((var (-Größe) * 0,1475) * var (-Tiefenmultiplikator));
}
.quare-cuboid-drei {
  -Tiefe: calc ((var (-Größe) * 0,125) * var (-Tiefenmultiplikator));
}

… Was uns so etwas gibt:

Sie können mit dem Tiefen -Schieberegler spielen, um die Quader wie Sie möchten! Für unsere Demo haben wir uns entschieden, die Quaders zu wahren Würfeln mit gleicher Höhe, Breite und Tiefe zu machen. Die Tiefe des Bogens stimmt mit dem größten Quader überein.

Nun für die Zylinder. Die Idee ist, zwei Enden zu erstellen, die Border-Radius verwenden: 50%. Dann können wir viele Elemente als Seiten des Zylinders verwenden, um den Effekt zu erzeugen. Der Trick besteht darin, alle Seiten zu positionieren.

Es gibt verschiedene Ansätze, die wir verfolgen können, um die Zylinder in CSS zu erstellen. Aber für mich, wenn dies etwas ist, das ich oft verwenden kann, werde ich es zukünftig versuchen. Das bedeutet, ein Mixin und einige Stile herzustellen, die ich für andere Demos wiederverwenden kann. Und diese Stile sollten versuchen, sich auf Szenarien zu kümmern, die ich tauchen konnte. Für einen Zylinder gibt es eine Konfiguration, die wir vielleicht in Betracht ziehen möchten:

• Radius
• Seiten
• Wie viele dieser Seiten werden angezeigt
• ob Sie eines oder beide Enden des Zylinders zeigen sollen

Wenn wir das zusammenstellen, können wir ein Mops -Mixin erstellen, das diesen Bedürfnissen gerecht wird:

 Mixinzylinder (Radius = 10, Seiten = 10, Schnitt = [5, 10], oben = true, boden = true)
  - const Innerangle = (((Seiten - 2) * 180) / Seiten) * 0,5
  - const cosangle = math.cos (Innerangle * (math.pi / 180))
  - const Side = 2 * Radius * Math.cos (Innerangle * (math.pi / 180))
  //- Verwenden Sie den Schnitt, um zu bestimmen, wie viele Seiten gerendert werden und von welchem ​​Punkt aus
  .Cylinder (style = `-side: $ {side};-seiten: $ {sides};-radius: $ {radius};` class! = Attribute.class)
    Wenn oben
      .Cylinder__end.cylinder__segment.cylinder__end--top
    Wenn unten
      .Cylinder__end.cylinder__segment.cylinder__end-Bottom
    - const [Start, Ende] = Schnitt
    - Lassen Sie i = starten
    Während ich ende
      .Cylinder__side.Cylinder__segment (style = `--Index: $ {i};`)
      - ich

Sehen Sie, wie //- auf den Kommentar im Code vorbereitet wird? Das sagt Pug, den Kommentar zu ignorieren und ihn aus dem kompilierten HTML -Markup herauszulassen.

Warum müssen wir den Radius in den Zylinder übergeben? Leider können wir mit CSS Calc () noch nicht mit der Trigonometrie umgehen (aber es kommt). Und wir müssen Dinge wie die Breite der Zylinderseiten ausarbeiten und wie weit sie von dem Zentrum entfernt sind, das sie projizieren sollten. Das Tolle ist, dass wir eine nette Möglichkeit haben, diese Informationen über Inline -Sondereigenschaften an unsere Stile weiterzugeben.

 .Zylinder(
  style = `
    -Seite: $ {Seite};
    -Seiten: $ {Seiten};
    -Radius: $ {radius}; `
  Klasse! = Attribute.class
)

Ein Beispiel für unser Mixin wäre wie folgt:

 Zylinder (20, 30, [10, 30])

Dies würde einen Zylinder mit einem Radius von 20, 30 Seiten erzeugen, wobei nur Seiten 10 bis 30 gerendert werden.

Dann brauchen wir etwas Styling. Das Styling der Zylinder für das Digitalocean -Logo ist zum Glück ziemlich unkompliziert:

 .Cylinder {
  -BG: HSL (var (-Hue), 100%, 50%);
  Hintergrund: RGBA (255,43,0,0,5);
  Höhe: 100%;
  Breite: 100%;
  Position: Relativ;
}
.Cylinder__segment {
  Filter: Helligkeit (var (-b, 1));
  Hintergrund: var (-BG, #e61919);
  Position: absolut;
  Top: 50%;
  Links: 50%;
}
.Cylinder__end {
  --B: 1,2;
  --end-coefficing: 0,5;
  Höhe: 100%;
  Breite: 100%;
  Grenzradius: 50%;
  Transformation: Translate3D (-50%, -50%, Calc ((var (-Tiefe, 0)) * var (-end-coeffiction) * 1Vmin));
}
.Cylinder__end-Bottom {
  --B: 0,8;
  --end-coefficing: -0,5;
}
.Cylinder__side {
  --B: 0,9;
  Höhe: Calc (var (-Tiefe, 30) * 1VMIN);
  Breite: Calc (var (-Seite) * 1VMIN);
  Transformation: Translate (-50%, -50%) rotatex (90-ad) rotatey (calc ((var (-Index, 0) * 360 / var (-Seiten)) * 1deg)) translate3d (50%, 0, calc (var (-Radius) * 1VMin));
}

Die Idee ist, dass wir alle Seiten des Zylinders erstellen und sie in die Mitte des Zylinders setzen. Dann drehen wir sie auf der Y-Achse und projizieren sie ungefähr in der Entfernung des Radius.

Es ist nicht erforderlich, die Enden des Zylinders im inneren Teil zu zeigen, da sie bereits verdeckt sind. Aber wir müssen sie für den äußeren Teil zeigen. Unser Zweizylinder-Mixin-Gebrauch sieht Folgendes aus:

 .Logo (style = `-Größe: $ {Größe}`)
  .Logo__ARC.Logo__ARC-ANNER
     Zylinder ((Größe * 0,61) * 0,5, 80, [0, 60], Falsch, Falsch) .Cylinder-arc.cylinder-arc-Erinner
  .Logo__ARC.Logo__ARC-OUTER
     Zylinder ((Größe * 1) * 0,5, 100, [0, 75], True, True) .Cylinder-Arc.Cylinder-Arc-Outer-outer

Wir kennen den Radius aus dem Durchmesser, den wir bei der früheren Verfolgung des Logos verwendet haben. Außerdem können wir die äußeren Zylinderenden verwenden, um die Gesichter des digitalen Logos zu erstellen. Eine Kombination aus Grenzbreit und Clip-Pad ist hier praktisch.

 .Cylinder-Arc-Outter .Cylinder__end--top,
.Cylinder-arc-outter .cylinder__end-bottom {
  / * Basierend auf dem Prozentsatz der Größe, die zum Decken des Bogens */erforderlich ist
  Randbreite: calc (var (-Größe) * 0,1975VMin);
  Grenzstil: solide;
  Grenzfarbe: HSL (var (-Farbton), 100%, 50%);
  -Clip: Polygon (50% 0, 50% 50%, 0 50%, 0 100%, 100%, 100% 0);
  Clip-Pfad: var (-Clip);
}

Wir sind ziemlich nahe an dem Ort, an dem wir sein wollen!

Es fehlt jedoch eine Sache: den Bogen zu beschränken. Wir müssen einige Enden für den Bogen erstellen, was zwei Elemente erfordert, die wir auf der X- oder Y-Achse positionieren und drehen können:

 .Szene
  .Logo (style = `-Größe: $ {Größe}`)
    .Logo__ARC.Logo__ARC-ANNER
       Zylinder ((Größe * 0,61) * 0,5, 80, [0, 60], Falsch, Falsch) .Cylinder-arc.cylinder-arc-Erinner
    .Logo__ARC.Logo__ARC-OUTER
       Zylinder ((Größe * 1) * 0,5, 100, [0, 75], True, True) .Cylinder-Arc.Cylinder-Arc-Outer-outer
    .Logo__Square.Logo__Square-eins
       cuboid (). quadratisch-cuboid.quare-cuboid-eins
    .Logo__Square.Logo__Square-zwei
       cuboid (). quadratisch-cuboid.quare-cuboid-zwei
    .Logo__Square.Logo__Square-drei
       cuboid (). quadratisch-cuboid.quare-cuboid-drei
    .Logo__cap.Logo__cap-top
    .Logo__cap.Logo__cap-Bottom

Die Kurzenden des Bogens nehmen die Höhe und Breite an, basierend auf dem Grenzwert des Endes sowie der Tiefe des Bogens.

 .Logo__cap {
  -----10;
  Position: absolut;
  Höhe: Calc (var (-Größe) * 0,1925VMin);
  Breite: Calc (var (-Größe) * 0,1975VMin);
  Hintergrund: HSL (var (-Hue), 100%, 50%);
}
.Logo__cap-top {
  Top: 50%;
  links: 0;
  Transformation: Translate (0, -50%) rotatex (90 °);
}
.Logo__cap-bottom {
  unten: 0;
  Rechts: 50%;
  Transformation: Translate (50%, 0) Rotatey (90 Grad);
  Höhe: Calc (var (-Größe) * 0,1975 VMIN);
  Breite: Calc (var (-Größe) * 0,1925VMin);
}

Wir haben den Bogen abgeschlossen!

Wenn wir alles zusammenwerfen, haben wir unser digitales Logo. Mit dieser Demo können Sie sie in verschiedene Richtungen drehen.

Aber es gibt noch einen Trick im Ärmel!

Hinzufügen eines Parallaxeffekts zum Logo

Wir haben unser 3D -Digitalocean -Logo, aber es wäre ordentlich, wenn es in irgendeiner Weise interaktiv wäre. Bereits im November 2021 haben wir behandelt, wie man einen Parallaxeffekt mit CSS -benutzerdefinierten Eigenschaften erzeugt. Lassen Sie uns dieselbe Technik hier verwenden. Die Idee ist, dass sich das Logo dreht und sich bewegt, indem sie dem Mauszeiger eines Benutzers folgt.

Wir brauchen einen Schuss JavaScript, damit wir die benutzerdefinierten Eigenschaften aktualisieren können, die wir für einen Koeffizienten benötigen, der die Bewegung des Logos entlang der X- und Y-Achsen im CSS festlegt. Diese Koeffizienten werden aus der Zeigerposition eines Benutzers berechnet. Ich werde oft Greensock verwenden, damit ich gsap.utils.maprange verwenden kann. Hier ist jedoch eine Vanille -JavaScript -Version davon, die MapRange implementiert:

 const mapRange = (Inputlower, Inputupper, Ausgangslower, Ausgangsupper) => {
  const input_range = inputupper - Inputlower
  const output_range = outputupper - outputlower
  return value => outputLower (((Wert - Eingabe) / input_range) * output_range || 0)
}

const bounds = 100      
const update = ({x, y}) => {
  const pos_x = MapRange (0, Fenster.
  const pos_y = MapRange (0, Fenster.
  document.body.style.setProperty ('-Coeffizient-X', POS_X)
  document.body.style.setProperty ('-Koeffizient-y', pos_y)
}

document.addeventListener ('pointermove', update)

Die Magie geschieht im CSS-Land. Dies ist einer der Hauptvorteile der Verwendung benutzerdefinierter Eigenschaften auf diese Weise. JavaScript erzählt CSS, was mit der Interaktion passiert. Aber es ist es egal, was CSS damit macht. Das ist eine Radentkopplung. Ich benutze dieses JavaScript -Snippet in so vielen meiner Demos aus diesem Grund. Wir können unterschiedliche Erfahrungen schaffen, indem wir das CSS aktualisieren.

Wie machen wir das? Verwenden Sie Calc () und benutzerdefinierte Eigenschaften, die direkt zum .scene -Element skopiert werden. Betrachten Sie diese aktualisierten Stile für .scene:

 .scene {
  -ROTATION-y: 75 Grad;
  -ROTATION-X: -14DEG;
  Transformation: Translate3d (0, 0, 100vmin)
    rotatex (-16deg)
    rotatey (28 Grad)
    rotatex (calc (var (-Koeffizient-y, 0) * var (-rotation-x, 0deg))))
    rotatey (calc (var (-Koeffizient-x, 0) * var (rotation-y, 0deg)));
}

Die Szene dreht sich auf den X- und Y-Achsen basierend auf der Zeigerbewegung des Benutzers. Aber wir können dieses Verhalten anpassen, indem wir die Werte für-Rotation-X und--Rotation-y optimieren.

Jeder Quader wird seinen eigenen Weg bewegen. Sie können sich entweder auf X, Y oder Z-Achse bewegen. Aber wir müssen nur eine Transformation definieren. Dann können wir Scoped Customeigenschaften verwenden, um den Rest zu erledigen.

 .Logo__Square {
  Transformation: Translate3D (
    Calc (min (0, var (-Koeffizient-x, 0) * var (-Offset-X, 0)) * 1%),
    calc ((var (-Koeffizient-y) * var (-offset-y, 0)) * 1%),
    Calc ((var (-Koeffizient-x) * var (-Offset-z, 0)) * 1VMin)
  );
}
.Logo__Square-eins {{
  --offset-x: 50;
  --offset-y: 10;
  --offset-z: -2;
}
.Logo__Square-zwei {{
  --offset-x: -35;
  --offset-y: -20;
  --offset-z: 4;
}
.Logo__Square-drei {
  --offset-X: 25;
  --offset-y: 30;
  --offset-z: -6;
}

Das wird dir so etwas geben:

Und wir können diese in den Inhalt unseres Herzens optimieren, bis wir etwas bekommen, mit dem wir zufrieden sind!

Hinzufügen einer Intro -Animation zum Mix

Ok, ich habe ein bisschen fib und habe eine letzte Art und Weise (ich verspreche!), Wir können unsere Arbeit verbessern. Was wäre, wenn wir eine Art Intro -Animation hätten? Wie wäre es mit einer Welle oder etwas, das das Logo überflutet und offenbart?

Wir könnten dies mit den Pseudoelementen des Körperelements tun:

 :Wurzel {
  -----215;
  --initial-delay: 1;
  -Wellengeschwindigkeit: 2;
}

Körper: Nach, danach
Körper: vor {
  Inhalt: '';
  Position: absolut;
  Höhe: 100VH;
  Breite: 100VW;
  Hintergrund: HSL (var (-hue), 100%, calc (var (-Leichtigkeit, 50) * 1%));
  Transformation: Translate (100%, 0);
  Animationsname: Welle;
  Animationsdauer: Calc (var (-Wellengeschwindigkeit) * 1s);
  Animation-Delay: Calc (var (-initial-delay) * 1s);
  Animations-Timing-Funktion: Eventual-In;
}
Körper: vor {
  -LEGENDE: 85;
  Animations-Timing-Funktion: Entlastung;
}
@keyframes wave {
  aus {
    Transformation: Translate (-100%, 0);
  }
}

Nun ist die Idee, dass das digitaloceanische Logo versteckt ist, bis die Welle darüber wäscht. Für diesen Effekt werden wir unsere 3D -Elemente von einer Deckkraft von 0 animieren. Und wir werden alle Seiten auf unsere 3D -Elemente aus einer Helligkeit von 1 animieren, um das Logo zu enthüllen. Da die Wellenfarbe dem des Logos übereinstimmt, werden wir nicht sehen, dass sie verblasst. Außerdem verwenden Sie mit dem Animations-Fill-Mode: Beide bedeutet, dass unsere Elemente das Styling unserer Schlüsselframes in beide Richtungen erweitern.

Dies erfordert eine Form der Animationszeitleiste. Und hier kommen benutzerdefinierte Eigenschaften ins Spiel. Wir können die Dauer unserer Animationen verwenden, um die Verzögerungen anderer zu berechnen. Wir haben uns das in meinem "Wie man ein reines CSS 3D -Paket zum Umschalten" und "animierte Matryoshka -Puppen in CSS" angesehen.

 :Wurzel {
  -----215;
  --initial-delay: 1;
  -Wellengeschwindigkeit: 2;
  -Fadegeschwindigkeit: 0,5;
  -Filterspeed: 1;
}

.Cylinder__segment,
.Cuboid__side,
.Logo__cap {
  Animationsname: Fade-In, Filter-In;
  Animationsdauer: Calc (var (-Fade-Speed) * 1s),
    Calc (var (-Filtergeschwindigkeit) * 1s);
  Animation-Delay: Calc ((var (-initial-delay) var (-Wellengeschwindigkeit)) * 0,75s),
    calc ((var (-initial-delay) var (-Wellengeschwindigkeit)) * 1,15s);
  Animations-Fill-Mode: Beide;
}

@keyframes filter-in {
  aus {
    Filter: Helligkeit (1);
  }
}

@keyframes verblassen {
  aus {
    Deckkraft: 0;
  }
}

Wie bekommen wir das Timing, oder? Ein wenig Basteln und Verwenden des „Animationsinspektors“ in Chromes Devtool ist viel. Versuchen Sie, die Timings in dieser Demo anzupassen:

Sie können feststellen, dass das Verblassen nicht erforderlich ist, wenn Sie möchten, dass das Logo da ist, sobald die Welle vorbei ist. Versuchen Sie in diesem Fall, den Fade auf 0 zu setzen und insbesondere mit dem Filter und den Fade -Koeffizienten zu experimentieren. Sie beziehen sich auf die 0,75 und 1,15s aus dem obigen Code. Es lohnt sich, Dinge anzupassen und ein Stück in Chromes Animationsinspektor zu haben, um zu sehen, wie sich die Dinge in der Zeit haben.

Das war's!

Wenn wir alles zusammenstellen, haben wir dieses nette Intro für unser 3D -Digitalocean -Logo!

Und natürlich nur ein Ansatz, um das digitaloceanische Logo in 3D mit CSS zu erstellen. Wenn Sie andere Möglichkeiten sehen oder etwas, das weiter optimiert werden kann, lassen Sie einen Link zu Ihrer Demo in den Kommentaren fallen!

Herzlichen Glückwunsch wieder an das CSS-Tricks-Team und Digitalocean für ihre neue Partnerschaft. Ich freue mich zu sehen, wohin die Dinge mit der Akquisition passen. Eines ist sicher: CSS-Tricks werden weiterhin fantastische Inhalte für die Community inspirieren und produzieren. ?

Das obige ist der detaillierte Inhalt vonErstellen des digitaloceanischen Logos in 3D mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!