Iron Man’s Arc Reactor Mit CSS3 Transforms und Animationen

Avatar of Kunal Sarkar
Kunal Sarkar am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Okay, Iron Man-Fans, startet eure Code-Editoren! Wir werden den Arc Reactor aus Iron Mans Anzug in CSS erstellen. So wird das Endergebnis aussehen

Siehe den Pen Iron Man’s Arc Reactor von Kunal Sarkar (@supersarkar) auf CodePen.

Der Full-Page-Wrapper

Wir werden unseren Arc Reactor auf einem dunklen Full-Page-Hintergrund erstellen. Hier ist unser Code, um ein Full-Page-Wrapper-Element zu erstellen

body {
  margin: 0;
}

.fullpage-wrapper {
  height: 100vh;
  background: radial-gradient(#353c44, #222931);
}

Warum deklarieren wir keinen Rand für den Body? Das <body>-Element hat standardmäßig einen Rand im User-Agent-Stylesheet. Dies verhindert, dass die Elemente innerhalb des <body> die Bildschirmränder berühren. Da wir möchten, dass unser Wrapper den gesamten Bildschirm von Rand zu Rand bedeckt, haben wir diesen Standardrand des <body>-Elements entfernt, indem wir ihn auf 0 gesetzt haben.

Wir haben unserem .fullpage-wrapper die volle Höhe des Viewports gegeben. Wir müssen keine Breite angeben, da ein Div standardmäßig volle Breite hat. Wir hätten auch einen anderen Ansatz wählen können, indem wir sowohl die Breite als auch die Höhe des Elements auf 100% gesetzt hätten, aber das birgt einige mögliche Nachteile, wenn weitere Elemente zum Bildschirm hinzugefügt werden. Die Verwendung von Viewport-Einheiten stellt sicher, dass unser Wrapper immer den vollen vertikalen Platz des Bildschirms einnimmt, unabhängig davon, was es ist oder welche anderen Elemente zum Layout hinzugefügt werden.

Wir haben auch einen radialen Farbverlauf für unseren Wrapper verwendet, indem wir die radial-gradient() CSS-Funktion genutzt haben. Die Parameter innerhalb der Funktion sind die Start- und Endpunkte der Farbe. Das Zentrum des Hintergrunds wird also mehr #353c44 sein und zu den Rändern hin mehr #222931. Es ist subtil, aber eine nette Geste.

Zentrieren des Reactor-Containers

Bevor wir mit der Erstellung unseres Reactors beginnen, erstellen wir einen Container dafür und zentrieren ihn

.reactor-container {
  width: 300px;
  height: 300px;
  margin: auto;
  border: 1px dashed #888;
}

Das ergibt uns eine 300px x 300px große Box mit einem gestrichelten Rand. Die Deklaration margin: auto; sorgt für gleichen horizontalen Abstand.

Aber warum zentriert es ihn nicht vertikal?

Gemäß den CSS2-Spezifikationen, wenn wir den linken und rechten Rand auf auto setzen, wird der gesamte verfügbare Platz gleichmäßig auf den linken und rechten Rand aufgeteilt. Dies ist bei den oberen und unteren Rändern jedoch nicht der Fall. Für den oberen und unteren Rand besagt die CSS2-Spezifikation

Wenn margin-top oder margin-bottom auto sind, ist ihr verwendeter Wert 0.

Wir haben jedoch gute Nachrichten. Das Flexbox-Layout folgt neuen Ausrichtungsregeln, und hier ist, was die Flexbox-Spezifikation zu sagen hat

Vor der Ausrichtung durch justify-content und align-self wird jeder positive freie Platz auf die Auto-Ränder in dieser Dimension verteilt.

Das bedeutet, wenn das betreffende Element als Flex-Element angezeigt wird, funktioniert margin: auto; in beiden Richtungen. Machen wir unseren Wrapper zu einem Flex-Container und seine Kindelemente zu Flex-Elementen

.fullpage-wrapper {
  width: 100%;
  height: 100vh;
  background: radial-gradient(#353c44, #222931);
  display: flex;
}

Da ist es, das ist viel besser

Es gibt viele andere Methoden, um Elemente in HTML zu zentrieren. Hier auf CSS-Tricks gibt es eine detaillierte Anleitung zum Zentrieren, um mehr zu erfahren.

Der Reactor-Kern: Konzentrische Kreise in CSS

Wir wissen, dass neue Elemente in HTML von links nach rechts (für Sprachen von links nach rechts) oder von oben nach unten erstellt werden. Elemente überlappen sich nie, bis Sie einen negativen Rand angeben.

Wie werden wir also konzentrische Kreise anzeigen? Wir werden absolute Positionierung verwenden.

Der Standardwert der position-Eigenschaft ist static. Statische und relative Positionierung folgen dem Fluss von oben nach unten und von links nach rechts. Ein absolut positioniertes Element wird jedoch nicht als Teil des Dokumentenflusses behandelt und kann mit den Eigenschaften top, right, bottom und left überall positioniert werden.

Beginnen wir mit dem kleinsten Kreis

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <!-- the smallest circle -->
    <div class="core-inner"></div>
  </div>
</div>
.core-inner {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid #1b4e5f;
  background-color: #fff;
}

Wir müssen diesen Div zentrieren. Sie könnten versucht sein, das gleiche Flexbox-Konzept anzuwenden, das wir auf das Reaktorelement angewendet haben, um diesen Kreis ebenfalls zu zentrieren. Aber hier ist, was die CSS2-Spezifikation zu sagen hat, wenn margin: auto; auf *absolut positionierte* Elemente angewendet wird

Wenn keine der drei (top, height und bottom) auto sind: Wenn sowohl margin-top als auch margin-bottom auto sind, lösen Sie die Gleichung unter der zusätzlichen Einschränkung, dass die beiden Ränder gleiche Werte erhalten.

Das bedeutet, wenn ein absolut positioniertes Element einen Wert für top, height und bottom hat, der von auto abweicht, wird das Element vertikal zentriert, wenn der obere und untere Rand auf auto gesetzt sind.

Gleiches gilt für die horizontale Zentrierung: Wenn ein absolut positioniertes Element einen Wert für left, width und right hat, der von auto abweicht, wird das Element horizontal zentriert, wenn der linke und rechte Rand auf auto gesetzt sind.

Das bedeutet, wir brauchen kein Flexbox-Layout, um ein absolut positioniertes Element mit bekannter Höhe und Breite zu zentrieren. Wir müssen nur sicherstellen, dass wir einen Wert für top, right, bottom und left angeben, der von auto abweicht. Also verwenden wir 0

.core-inner {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  border: 5px solid #1b4e5f;
  background-color: #fff;
}

Wir wollen diese fünf Zeilen nicht für alle konzentrischen Kreise wiederholen, die wir haben werden, also erstellen wir dafür eine separate Klasse. Wir wollen auch nicht border-radius: 50%; für alle Divs definieren, die wir als Kreise anzeigen wollen, also erstellen wir dafür auch eine Klasse

.circle {
  border-radius: 50%;
}

.abs-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

}

.core-inner {
  width: 70px;
  height: 70px;
  border: 5px solid #1b4e5f;
  background-color: #fff;
}

Fügen Sie auch diese neuen Klassen zu unserem .core-inner-Element hinzu

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <!-- the smallest circle -->
    <div class="core-inner circle abs-center"></div>
  </div>
</div>

Okay, unser konzentrischer Kreis ist zentriert. Lassen Sie ihn leuchten.

Aber CSS hat keine "Glow"-Eigenschaft.

Keine Sorge, wir haben die box-shadow-Eigenschaft. Anstatt dem Schatten eine dunkle Farbe zu geben, geben wir ihm eine helle Farbe, damit der Schatten wie ein Glühen aussieht. Ziemlich clever, oder? 😉

Machen wir das

.core-inner {
  width: 70px;
  height: 70px;
  border: 5px solid #1b4e5f;
  background-color: #fff;
  box-shadow: 0px 0px 7px 5px #52fefe;
}

Lassen Sie uns eine Pause machen und zuerst die Syntax von box-shadow verstehen, da wir sie oft verwenden werden. Hier sind die Bedeutungen der Werte für box-shadow in dieser Reihenfolge

  • x-offset: Wie stark wir den Schatten nach rechts (x-Achse) verschieben wollen. Negative Werte verschieben den Schatten nach links.
  • y-offset: Wie stark wir den Schatten nach oben oder unten (y-Achse) verschieben wollen.
  • blur-radius: Wie verschwommen unser Schatten sein soll.
  • spread-radius: Wie stark wir wollen, dass sich unser Schatten ausbreitet.
  • color: Farbe des Schattens.

Spielen Sie ein wenig mit diesen Werten, um ihre Effekte in Echtzeit zu sehen.

In Wirklichkeit fallen Schatten nicht nur außerhalb eines Objekts. Schatten fallen auch auf die Objekte. Stellen Sie sich eine Grube vor, die von einem Hund gegraben wurde, sie wird einen Schatten darin haben, oder?

Wir können einen Schatten innerhalb eines Elements mit dem Schlüsselwort inset in der box-sizing-Eigenschaft setzen. Um einem Element sowohl einen äußeren als auch einen inneren Schatten zu geben, trennen wir sie einfach mit einem Komma. Machen wir das, um einen äußeren und inneren Schein für den inneren Kern unseres Reactors zu erhalten

.core-inner {
  width: 70px;
  height: 70px;
  border: 5px solid #1B4e5f;
  background-color: #fff;
  box-shadow: 0px 0px 7px 5px #52fefe, 0px 0px 10px 10px #52fefe inset;
}

Jetzt fängt es an, Sci-Fi zu werden!

Erstellen wir noch einen Kreis oben drauf. Wir wollen, dass der innere Kreis über den anderen Kreisen angezeigt wird, also fügen wir die neuen Kreis-Divs *vor* dem inner-circle im Code hinzu

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <!-- the second circle -->
    <div class="core-outer circle abs-center"></div>
    <!-- the smallest circle -->
    <div class="core-inner circle abs-center"></div>
  </div>
</div>

Die Elemente weiter unten im Code werden oben auf dem Bildschirm angezeigt. Wenn wir den core-outer unter dem core-inner im Code platzieren, wird core-inner nicht sichtbar sein, weil core-outer ihn abdecken wird.

Geben wir dem outer-code Stil. Der äußere Kern wird etwas größer sein als der innere Kern und wir werden auch dem core-outer einen äußeren und inneren Schein geben

.core-outer {
  width: 120px;
  height: 120px;
  border: 1px solid #52fefe;
  background-color: #fff;
  box-shadow: 0px 0px 2px 1px #52fefe, 0px 0px 10px 5px #52fefe inset;
}

Ich möchte, dass Sie eine Sache tun: Schauen Sie sich die Schatten (Glow) an und versuchen Sie zu identifizieren, welcher zu welchem Kreis gehört. Es gibt vier Schatten und zwei Kreise (bis jetzt).

Um die Gestaltung des Kerns abzuschließen, benötigen wir noch einen weiteren Kreis, der die inneren und äußeren Kreise umschließt

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <!-- the third circle -->
    <div class="core-wrapper circle abs-center"></div>
    <!-- the second circle -->
    <div class="core-outer circle abs-center"></div>
    <!-- the smallest circle -->
    <div class="core-inner circle abs-center"></div>
  </div>
</div>

Dieser wird etwas größer sein und wieder die gleichen Schatten haben, wir werden einen dunklen Hintergrund für core-wrapper verwenden

.core-wrapper {
  width: 180px;
  height: 180px;
  background-color: #073c4b;
  box-shadow: 0px 0px 5px 4px #52fefe, 0px 0px 6px 2px #52fefe inset;
}

Erstellung von Reactor-Spulen und Rotation mit CSS3 Transforms

Wir haben den Kern des Reactors, jetzt brauchen wir einen Tunnel um den Kern. Tatsächlich können wir eine Illusion eines runden Tunnels erzeugen, indem wir nur noch einen Kreis zeichnen, der etwas größer ist als der core-wrapper. Machen wir das

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <!-- the largest circle -->
    <div class="tunnel circle abs-center"></div>
    <!-- the third circle -->
    <div class="core-wrapper circle abs-center"></div>
    <!-- the second circle -->
    <div class="core-outer circle abs-center"></div>
    <!-- the smallest circle -->
    <div class="core-inner circle abs-center"></div>
  </div>
</div>

...ein wenig breiter und fügen Sie dem Tunnel den gleichen Schein hinzu

.tunnel {
  width: 220px;
  height: 220px;
  background-color: #fff;
  box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe inset;
}

Unser Tunnel ist fertig.

Stellen Sie sicher, dass Sie den Code nicht nur kopieren und einfügen. Schauen Sie sich die Scheine der Kreise an und identifizieren Sie, welcher Schein zu welchem Kreis gehört, ob es ein äußerer Schein oder ein innerer Schein ist.

Nun benötigen wir acht Spulen auf diesem Tunnel. Die Spulen sind einfache Rechtecke, aber die größte Herausforderung besteht darin, dass die Spulen dem runden Pfad des Tunnels folgen müssen; nicht in gerader Linie.

Ein Weg, dies zu tun, wäre, acht kleine Rechtecke zu erstellen, ihren Mittelpunkt zum Zentrum des Reactors zu verschieben und jede Spule um einen zunehmenden Winkel (in Vielfachen von 45deg) zu drehen.

Machen wir es nicht kompliziert und erstellen wir eine Rechteckspule nach der anderen

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <div class="tunnel circle abs-center"></div>
    <div class="core-wrapper circle abs-center"></div>
    <div class="core-outer circle abs-center"></div>
    <div class="core-inner circle abs-center"></div>
    <div class="coil-1"></div>
  </div>
</div>
.coil-1 {
  position: absolute;
  width: 30px;
  height: 26px;
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

Nun wollen wir diese Spule im Zentrum oben auf dem Tunnel platzieren. So

Unser reactor-container ist 300px x 300px, also ist das Zentrum bei 150px von oben und links. Der Tunnel ist 220px breit, also ist sein Radius 110px. Dies gibt uns den oberen Offset der Spule: 150px - 110px.

Wir können die linke Seite der Spule auf 150px belassen, aber da unsere Spule 30px breit ist, verschiebt dies die Mitte der Spule um 15px nach rechts, weshalb wir 15px von 150px subtrahieren müssen, um den linken Offset der Spule zu erhalten.

Wir können diese entweder selbst berechnen und den Wert eingeben, oder wir können die CSS calc()-Funktion verwenden. Verwenden wir die CSS calc()-Funktion, um die Top- und Left-Eigenschaften der Spule zu berechnen

.coil-1 {
  position: absolute;
  width: 30px;
  height: 20px;
  top: calc(50% - 110px);
  left: calc(50% - 15px);
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

Wie Sie sehen können, nimmt die calc()-Funktion einen mathematischen Ausdruck als Argument und löst ihn.

Nun benötigen wir acht solche Spulen, aber sie müssen auf dem Tunnel liegen. Um das zu tun, wie besprochen, können wir die acht Spulen einfach an derselben Stelle platzieren, dann ihren Ursprung auf das Zentrum des Reactors setzen und jede Spule um ein Inkrement von 45 Grad drehen.

Wir müssen den Ursprung der Spule aktualisieren, da er standardmäßig auf das Zentrum der Spule eingestellt ist; wir wollen ihn im Zentrum des Reactors haben

Wir werden die Eigenschaft transform-origin verwenden, um den Ursprung der Spule festzulegen

.coil-1 {
  position: absolute;
  width: 30px;
  height: 20px;
  top: calc(50% - 110px);
  left: calc(50% - 15px);
  transform-origin: 15px 110px;
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

Der erste Wert, 15px, in transform-origin ist der x-offset (horizontale Entfernung) von der oberen linken Ecke des Elements, und der zweite Wert, 110px, ist der y-offset (vertikale Entfernung) von der oberen linken Ecke des Elements.

Der Ursprung der Spule befindet sich nun im Zentrum des Reactors. Lassen Sie uns ihn mit der CSS3-Transform-Eigenschaft um 45 Grad drehen und sehen, was passiert

.coil-1 {
  position: absolute;
  width: 30px;
  height: 20px;
  top: calc(50% - 110px);
  left: calc(50% - 15px);
  transform-origin: 15px 110px;
  transform: rotate(45deg);
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

Großartig! Das ist genau das, was wir wollen.

Bevor wir alle acht Spulen erstellen, erstellen wir einen Spulen-Container-Div, der alle acht Spulen enthalten wird

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <div class="tunnel circle abs-center"></div>
    <div class="core-wrapper circle abs-center"></div>
    <div class="core-outer circle abs-center"></div>
    <div class="core-inner circle abs-center"></div>
    <!-- the coil container -->
    <div class="coil-container">
      <div class="coil coil-1"></div>
    </div>
  </div>
</div>

Sie werden bemerken, dass wir auch eine Klasse "coil" zum Element "coil-1" hinzugefügt haben. Wir werden alle gemeinsamen Stile für Spulen in der Klasse "coil" belassen, und die einzelnen Spulen-Element-Klassen werden nur ihre Rotationswinkel enthalten

.coil-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.coil {
  position: absolute;
  width: 30px;
  height: 20px;
  top: calc(50% - 110px);
  left: calc(50% - 15px);
  transform-origin: 15px 110px;
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

.coil-1 {
  transform: rotate(45deg);
}

Die Ausgabe wird gleich bleiben.

Nun machen wir alle acht Spulen innerhalb von .coil-container

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <div class="tunnel circle abs-center"></div>
    <div class="core-wrapper circle abs-center"></div>
    <div class="core-outer circle abs-center"></div>
    <div class="core-inner circle abs-center"></div>
    <!-- the coil container -->
    <div class="coil-container">
      <div class="coil coil-1"></div>
      <div class="coil coil-2"></div>
      <div class="coil coil-3"></div>
      <div class="coil coil-4"></div>
      <div class="coil coil-5"></div>
      <div class="coil coil-6"></div>
      <div class="coil coil-7"></div>
      <div class="coil coil-8"></div>
    </div>
  </div>
</div>

...und geben allen Spulen unterschiedliche Rotationen (in Inkrementen von 45 Grad)

.coil {
  position: absolute;
  width: 30px;
  height: 20px;
  top: calc(50% - 110px);
  left: calc(50% - 15px);
  transform-origin: 15px 110px;
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

.coil-1 {
  transform: rotate(0deg);
}

.coil-2 {
  transform: rotate(45deg);
}

.coil-3 {
  transform: rotate(90deg);
}

.coil-4 {
  transform: rotate(135deg);
}

.coil-5 {
  transform: rotate(180deg);
}

.coil-6 {
  transform: rotate(225deg);
}

.coil-7 {
  transform: rotate(270deg);
}

.coil-8 {
  transform: rotate(315deg);
}

Unser Reaktor ist fast fertig.

Animation der Spulen mit CSS3 Animations

In Iron Mans Arc Reactor bewegen sich die Spulen nicht, aber in unserem Reaktor werden sie es tun. Wir werden die Spulen animieren, damit sie sich entlang des Tunnels drehen, und wir werden CSS3-Animationen dafür verwenden – kein JavaScript.

Um eine Animation zu erstellen, müssen Sie die Anfangs- und Endzustände des Objekts kennen, das Sie animieren möchten. Wir definieren diese Anfangs- und Endzustände in CSS, indem wir die @keyframes-Regel verwenden

@keyframes reactor-anim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Wir wollen, dass das Element bei 0 Grad ist und es animieren, bis es 360 Grad erreicht. Und wir haben diese Animation "reactor-anim" genannt.

Das zu animierende Element ist .coil-container. Beachten Sie, wir haben noch nicht definiert, welches Objekt animiert werden soll, wir haben nur den Anfangs- und den Endzustand sowie den Namen der Animation definiert.

Wir müssen das Element mit der Animation verknüpfen, damit sie wirksam wird. Das tun wir, indem wir die animation-name-Eigenschaft auf .coil-container anwenden

.coil-container {
  position: relative;
  width: 100%;
  height: 100%;
  animation-name: reactor-anim;
  animation-duration: 3s;
}

Beachten Sie, dass wir auch die Animationsdauer mit der Eigenschaft animation-duration angegeben haben. Diese definiert, wie lange es dauert, vom "from"-Zustand zum "to"-Zustand zu gelangen, wie in der @keyframes-Regel definiert.

Siehe den Pen Arc-Reactor-Ease-In von Kunal Sarkar (@supersarkar) auf CodePen.

Wir müssen hier zwei Dinge ändern: Wir wollen, dass die Animation unendlich läuft, und wir wollen eine lineare Animation. Sie sehen, dass die Animation am Anfang langsam ist, dann schnell und am Ende wieder langsam – dieses Verhalten wird durch die Timing-Funktion einer Animation bestimmt.

Machen wir diese Änderungen

.coil-container {
  position: relative;
  width: 100%;
  height: 100%;
  animation-name: reactor-anim;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Wir haben die Eigenschaft animation-iteration-count verwendet, um die Animation auf infinite einzustellen, und animation-timing-function, um die Animation linear zu machen. Der Standardwert von animation-timing-function ist ease.

Siehe den Pen Arc-Reactor-Linear-Infinite von Kunal Sarkar (@supersarkar) auf CodePen.

Wir können all diese Animationseigenschaften kombinieren…

animation-name: reactor-anim;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;

…in einer Kurzschrifteigenschaft wie dieser

animation: 3s infinite linear reactor-anim;

Letzte Anpassungen am Reactor-Container

Unser Reaktor ist fertig, nun nehmen wir einige letzte Änderungen am .reactor-container vor. Zuerst benötigen wir einen dunklen Kreis hinter dem Reaktor

<div class="fullpage-wrapper">
  <div class="reactor-container">
    <!-- dark circle behind the reactor -->
    <div class="reactor-container-inner circle abs-center"></div>
    <div class="tunnel circle abs-center"></div>
    <div class="core-wrapper circle abs-center"></div>
    <div class="core-outer circle abs-center"></div>
    <div class="core-inner circle abs-center"></div>
    <div class="coil-container">
      <div class="coil coil-1"></div>
      <div class="coil coil-2"></div>
      <div class="coil coil-3"></div>
      <div class="coil coil-4"></div>
      <div class="coil coil-5"></div>
      <div class="coil coil-6"></div>
      <div class="coil coil-7"></div>
      <div class="coil coil-8"></div>
    </div>
  </div>
</div>

Geben wir ihm einen dunklen Hintergrund und fügen wir etwas Schein hinzu

.reactor-container-inner {
  height: 238px;
  width: 238px;
  background-color: rgb(22, 26, 27);;
  box-shadow: 0px 0px 4px 1px #52fefe;
}

Siehe den Pen Arc-Reactor-Semi-Final von Kunal Sarkar (@supersarkar) auf CodePen.

Sehen Sie, wie der dunkle Hintergrund und der Schein einen geprägten Effekt erzeugen?

Als nächstes machen wir den .rotator-container rund und geben ihm einen Schatten und einen Rand, dann sind wir fertig

.reactor-container {
  width: 300px;
  height: 300px;
  margin: auto;
  border: 1px dashed #888;
  position: relative;
  border-radius: 50%;
  background-color: #384c50;
  border: 1px solid rgb(18, 20, 20);
  box-shadow: 0px 0px 32px 8px rgb(18, 20, 20), 0px 0px 4px 1px rgb(18, 20, 20) inset;
}

Siehe den Pen Iron Man’s Arc Reactor von Kunal Sarkar (@supersarkar) auf CodePen.

Juhu! Unser Arc Reactor ist fertig und sogar mit einer kleinen Animation als Bonus. Um das Ganze zu verbessern, könnten wir benutzerdefinierte Eigenschaften verwenden, um wiederverwendbare Variablen für unsere Farb- und Zahlenwerte zu erstellen, was die Wartung erleichtert. Ebenso könnten wir uns ansehen, wie man einen Präprozessor – wie Sass, Less oder PostCSS – verwendet, um Funktionen zu schreiben, die für uns die mathematischen Berechnungen durchführen. Würde gerne Beispiele dafür in den Kommentaren sehen!

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Konstantin
    Permalink zum Kommentar#

    Wirklich schöner Artikel. Persönlich hat mir die Art, wie Sie Dinge erklären (mit Beispielen und Zitaten aus dem W3C), besser gefallen als der "Reaktor" selbst. Bitte machen Sie weiter so.

  2. Joel
    Permalink zum Kommentar#

    Wirklich cool!

    Ich habe die Größe etwas vergrößert und eine innere Spule hinzugefügt

    Schauen Sie es sich hier an

  3. Kunal Sarkar
    Permalink zum Kommentar#

    Danke Konstantin. :)

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .