Iron Man Arc Reactor Mit CSS3-Transformationen und-Animationen

0
44

Okay Iron Man fans, feuern Sie Ihre code-Editoren! Wir machen den Arc-Reaktor von Iron Man ‘ s Anzug in CSS. Hier ist, was das Endergebnis Aussehen wird:

Finden Sie die Stift-Iron Man Arc Reactor von Kunal Sarkar (@supersarkar) auf CodePen.

Die Voll-Page-Wrapper

Machen wir uns auf den Arc-Reaktor auf eine dunkle voll-page-hintergrund. Hier ist unser code, um eine ganze Seite wrapper-element:

body {
margin: 0;
}

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

Warum tun wir deklarieren keine Marge auf den Körper? Der <body> – element hat einige Rand gesetzt, um es standardmäßig in der user-agent-stylesheet. Dies verhindert, dass die Elemente innerhalb des <body> zu berühren die Ränder des Bildschirms. Da wir wollen, dass unser wrapper um den gesamten Bildschirm von Kante zu Kante, wir entfernt, die default-Marge auf <body> – element durch den Wert 0 festlegen.

Wir haben unseren .fullpage-wrapper die volle Höhe des Viewports. Wir müssen nicht angeben, eine Breite, weil ein div-Element mit voller Breite standardmäßig. Wir hätten mit einem anderen Ansatz, durch Einstellung der Breite und Höhe des Elements um 100%, aber das kommt mit einigen möglichen Nachteilen, wie mehr Elemente Hinzugefügt werden, um die Bildschirm. Verwendung von viewport-Einheiten sorgt dafür, dass unsere wrapper belegt immer die volle vertikale Platz auf dem Bildschirm, unabhängig davon, was es ist oder welche anderen Elemente werden zum layout Hinzugefügt.

Wir benutzten auch einen radialen Verlauf auf unser wrapper mit radial-gradient() die CSS-Funktion. Die Parameter innerhalb der Funktion werden die Farbe, die start-und end-Punkte. So, das Zentrum der hintergrund wird mehr #353c44 und mehr #222931 zu den Rändern hin. Es ist subtil, aber eine nette Geste.

Die Zentrierung der Reaktor-Container

Bevor wir beginnen, erstellen unser Reaktor, erstellen wir einen container, für Sie und zentrieren Sie es:

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

Dies gibt uns eine 300px x 300px box mit gestrichelter Umrandung. Die margin: auto; Erklärung stellt einen gleichen horizontalen Abstand.

Aber warum es nicht zentriert vertikal?

Pro CSS2-Spezifikationen, wenn wir auto Rand auf der linken und rechten Seite, dann der gesamte Raum wird gleichmäßig verteilt auf der linken und rechten Rand. Dies ist nicht der gleiche Fall für den oberen und unteren Rand obwohl. Für den oberen und den unteren Rand der CSS2-Spezifikation besagt:

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

Wir haben jedoch eine gute Nachricht. Das flexbox-layout folgt neuen Regeln für die Ausrichtung, und hier ist, was die Flexbox-spec zu sagen hat:

Vor der Ausrichtung via begründen-Inhalt und ausrichten-selbst, alle positiven freien Speicherplatz verteilt sich auf auto-Margen in dieser dimension.

Dies bedeutet, wenn das element in der Betrachtung ist angezeigt, da ein flex-Element, und dann margin: auto; funktioniert in beide Richtungen. Lassen Sie die Wickler ein flex-container und seine untergeordneten Elemente flex-Elemente:

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

Es ist viel besser:

Es gibt viele andere Methoden, um center-Elemente in HTML. Es gibt eine detaillierte Anleitung, zentrieren Sie hier auf CSS-Tricks, um mehr zu erfahren.

Der Reaktorkern: Konzentrische Kreise in CSS

Wir wissen, dass neue Elemente in HTML erstellt werden, von Links nach rechts (für Links-nach-rechts-Sprachen), oder von oben nach unten. Elemente niemals überschneiden, bis Sie einige negative Marge.

Also, wie werden wir die Anzeige von konzentrischen Kreisen? Wir verwenden die absolute Positionierung.

Der default-Wert der position-Eigenschaft ist statisch. Statische und relative Positionierung Folgen, die Strömung von oben nach unten und von Links nach rechts. Jedoch ein absolut positioniertes element nicht behandelt, als ein Teil des belegflusses und kann überall positioniert werden mit dem oberen, rechten, unteren und linken Eigenschaften.

Lassen Sie uns beginnen Sie, indem Sie den kleinsten Kreis:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<!– der kleinste Kreis –>
<div class=”core-inner”></div>
</div>
</div>
.core-inner {
position: absolute;
width: 70px;
Höhe: 70px;
border-radius: 50%;
border: 5px solid #1b4e5f;
background-color: #fff;
}

Wir müssen-center div. Sie könnten versucht sein, um die gleichen flexbox-Konzept, das wir verwendet auf den Reaktor element Zentrum dieses Kreises als gut. Aber, hier ist, was CSS2-spec zu sagen hat über die Einstellung margin: auto; auf absolut positionierte Elemente:

Wenn keiner der drei (oben, Höhe, und unten) auto: Wenn beide margin-top und margin-bottom sind auto, lösen Sie die Gleichung unter der zusätzlichen Einschränkung, dass die beiden Ränder bekommen gleich Werte.

Dies bedeutet, wenn ein absolut positioniertes element hat einen beliebigen Wert für oben, Höhe und Boden anderen als auto, dann die Einstellung der oberen und unteren Rand, um auto-center wird das element vertikal.

Gleichen Fall für das horizontale zentrieren: wenn ein absolut positioniertes element hat einen beliebigen Wert für left, width und right anderes als auto, dann die Einstellung der linken und rechten Rand auf auto-center wird das element horizontal.

Das heißt, wir brauchen nicht flexbox-layout-center ein absolut positioniertes element mit einer bekannten Höhe und Breite. Wir müssen nur sicherstellen, dass wir ihm etwas Wert, top, right, bottom und left andere als auto. Also, wir verwenden 0:

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

Wir wollen nicht wiederholen Sie diese fünf Zeilen für alle die konzentrischen Kreise, die wir gehen zu müssen, so erstellen wir eine eigene Klasse für diese. Wir wollen auch nicht zu definieren border-radius: 50%; für alle divs, die wir anzeigen möchten, die als Kreise, so erstellen wir eine Klasse, für das auch:

.Kreis {
border-radius: 50%;
}

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

}

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

Auch, fügen Sie diese neuen Klassen aus .core-inner-element:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<!– der kleinste Kreis –>
<div class=”core-inner circle-abs-center”></div>
</div>
</div>

Okay, unser konzentrischen Kreis zentriert ist. Lass es glühen.

Aber CSS hat keine “glow” – Eigenschaft.

Keine Sorge, wir haben die box-shadow-Eigenschaft. Anstatt dem Schatten einer dunklen Farbe, wir geben es eine helle Farbe, um die Schatten sehen aus wie Glut. Ziemlich clever, nicht wahr? 😉

Lassen Sie uns dies tun:

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

Nehmen Sie eine Pause, und zu verstehen, die syntax des box-shadow zuerst, weil wir es sehr. Hier sind, was diese Werte für box-shadow bedeuten in dieser Reihenfolge:

  • x-offset: wie viel wir möchten, drücken Sie die Schatten auf der rechten Seite (x-Achse). Negative Werte schieben die Schatten auf der linken Seite.
  • y-offset: wie viel wir möchten, drücken Sie die Schatten nach oben oder unten (y-Achse).
  • Unschärfe-radius: wie unscharf wir wollen, dass unser Schatten zu sein.
  • spread-radius: wie viel wollen wir unseren Schatten zu verbreiten.
  • Farbe: Farbe des Schattens.

Spielen Sie mit diesen Werten ein wenig zu sehen, deren Auswirkungen in Echtzeit.

Im wirklichen Leben, die Schatten fallen nicht nur außerhalb eines Objekts. Schatten fallen auf die Objekte zu. Stellen Sie sich eine Grube gegraben, die durch einen Hund, wird es einen Schatten drin, richtig?

Wir können einen Schatten in einem element mit der inset Schlüsselwort in der box-sizing-Eigenschaft. Geben Sie ein element sowohl außen und innen Schatten, die wir einfach trennen Sie mit Komma. Wir tun dies, um ein außen und innen glühen, um unser Reaktor ist der innere Kern:

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

Jetzt beginnt es zu schauen, sci-fi!

Lassen Sie uns erstellen Sie einen weiteren Kreis auf der Oberseite. Wir wollen, dass die innere Kreis um display auf der Oberseite des anderen Kreisen, so werden wir neue Kreis divs, *über* den inneren Kreis im code:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<!– der zweite Kreis –>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<!– der kleinste Kreis –>
<div class=”core-inner circle-abs-center”></div>
</div>
</div>

Die Elemente unten im code, die angezeigt werden oben auf dem Bildschirm. Wenn wir die core-outer unterhalb der core-der innere in den code, dann Kern-inneren nicht sichtbar sein, da core-outer abdecken.

Wir geben Stil zu den äußeren-code. Der äußere Kern wird ein wenig größer als der innere Kern, und wir geben einen äußeren und inneren Schein zu core-outer zu:

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

Ich möchte Sie nur eins tun: schauen Sie sich die Schatten (Schein) und versuchen zu ermitteln, welche eine von der Kreis. Es gibt vier Schatten und zwei Kreise (bis jetzt).

Um den Entwurf zu beenden der Kern, benötigen wir eine weitere Kreis, wickeln Sie die inneren und äußeren Kreis:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<!– der Dritte Kreis –>
<div class=”Kern-wrapper-Kreis-abs-center”></div>
<!– der zweite Kreis –>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<!– der kleinste Kreis –>
<div class=”core-inner circle-abs-center”></div>
</div>
</div>

Es ist ein wenig größer, und wird es wieder haben den gleichen Schatten, verwenden wir einen dunklen hintergrund für core-wrapper:

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

Erstellen von Reaktor-Spulen und Rotierenden mit CSS3-Transformationen

Wir haben den Kern des Reaktors, jetzt brauchen wir einen tunnel, um den Kern. Tatsächlich, wir können eine illusion von einem Runden tunnel, durch Zeichnung nur noch einen Kreis etwas größer als die core-wrapper. Lasst es uns tun:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<!– der größte Kreis –>
<div class=”tunnel-Kreis-abs-center”></div>
<!– der Dritte Kreis –>
<div class=”Kern-wrapper-Kreis-abs-center”></div>
<!– der zweite Kreis –>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<!– der kleinste Kreis –>
<div class=”core-inner circle-abs-center”></div>
</div>
</div>

…ein wenig breiter, und fügen Sie dasselbe Leuchten in den tunnel:

.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 nicht nur kopieren und einfügen den code. Haben Sie einen Blick auf den Schein der Kreise und ermitteln, welche Leuchten von welchem Kreis, ob es außerhalb von Leuchten oder Einschub glühen.

Jetzt müssen wir acht Spulen auf diesen tunnel. Die Spulen sind einfache Rechtecke, aber die größte Herausforderung ist, dass wir die Spulen entlang der Runde Weg von dem tunnel, nicht in gerader Linie.

Eine Möglichkeit dazu wäre die Einrichtung acht kleine Rechtecke, shift-Zentrum auf das Zentrum des Reaktors, und drehen jede Spule durch einen zunehmenden Winkel (in vielfachen von 45deg).

Lassen Sie uns nicht komplizieren und machen ein Rechteck Spule zu einer Zeit:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<div class=”tunnel-Kreis-abs-center”></div>
<div class=”Kern-wrapper-Kreis-abs-center”></div>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<div class=”core-inner circle-abs-center”></div>
<div class=”Schwingspule-1″></div>
</div>
</div>
.coil-1 {
position: absolute;
width: 30px;
Höhe: 26px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

Nun möchten wir diese Spule in der Mitte an der Spitze des Tunnels. Wie diese:

Unser Reaktor-container ist 300px x 300px, so dass die Mitte ist bei 150px von oben und Links. Der tunnel ist 220px breit, so dass der radius wird 110px. Dies gibt uns die Obere Abstand der Spule: 150px – 110px.

Wir können halten Sie sich Links von der Spule auf 150px, aber da unsere Spule ist 30px breit, es wird eine Verschiebung der Mitte der Spule von 15px nach rechts, das ist, warum wir brauchen, um zu subtrahieren 15px von 150px zu bekommen, der linke Abstand von der Spule.

Wir können entweder die Berechnung dieser uns selbst und setzen den Wert, oder wir verwenden die CSS calc () – Funktion. Wir verwenden die CSS calc () – Funktion zu berechnen, die Eigenschaften top und left der Spule:

.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, die calc () – Funktion nimmt einen mathematischen Ausdruck als argument und löst es.

Jetzt müssen wir acht solcher Spulen, aber Sie müssen liegen auf dem tunnel. Zu tun, dass, wie besprochen, können wir einfach die acht Spulen auf der gleichen Stelle, dann verwandeln Ihren Ursprung, die Mitte des Reaktors, und drehen jede Spule von einer Zunahme von 45 Grad.

Wir aktualisieren die Spule Herkunft, da ist es standardmäßig gesetzt, um das Zentrum der Spule; wir wollen es in der Mitte des Reaktors:

Wir verwenden transform-origin-Eigenschaft, um die Herkunft der Spule:

.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 die x-Koordinate (horizontale Entfernung) von der oberen linken Ecke des Elements, und der zweite Wert, 110px, wird der y-offset (vertikal) Abstand von der oberen linken Ecke des Elements.

Die Spule Ursprung wird nun in der Mitte des Reaktors, lassen Sie uns drehen Sie Sie um 45 Grad, die mithilfe der CSS3-Eigenschaft transform 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;
}

Super!!! Das ist genau das, was wir wollen.

Vor dem erstellen alle acht Spulen, erstellen wir eine Spule div-container enthält alle acht Spulen:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<div class=”tunnel-Kreis-abs-center”></div>
<div class=”Kern-wrapper-Kreis-abs-center”></div>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<div class=”core-inner circle-abs-center”></div>
<!– die Spule container –>
<div class=”coil-container”>
<div class=”Spule coil-1″></div>
</div>
</div>
</div>

Sie werden feststellen, wir auch Hinzugefügt eine Klasse “Spule” auf der “coil-1” – element. Wir halten alle gängigen Stile für die Spulen in den “coil” – Klasse, und die einzelnen coil element-Klassen werden nur Ihre Drehwinkel:

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

.Spule {
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);
}

Der Ausgang bleibt gleich.

Nun, wir machen alle acht Spulen im inneren .coil-container:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<div class=”tunnel-Kreis-abs-center”></div>
<div class=”Kern-wrapper-Kreis-abs-center”></div>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<div class=”core-inner circle-abs-center”></div>
<!– die Spule container –>
<div class=”coil-container”>
<div class=”Spule 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=”Spule-Spule-6″></div>
<div class=”Spule-Spule-7″></div>
<div class=”coil-coil-8″></div>
</div>
</div>
</div>

…und geben unterschiedliche Rotationen um alle Spulen (in Schritten von 45 Grad):

.Spule {
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);
}

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

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

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

.Spule-5 {
transform: rotate(180GRAD);
}

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

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

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

Unser Reaktor ist fast fertig.

Die Animation der Spulen Mit CSS3-Animationen

In Iron Man Arc Reaktor, die Spulen bewegen sich nicht, aber Sie wird in unserem Reaktor. Wir animieren die Spulen zu drehen, entlang des Tunnels und die Nutzung der CSS3-Animationen—kein JavaScript.

Um eine animation zu erstellen, müssen Sie wissen, die ersten und letzten Zustände des Objekts sind Sie gehen zu animieren. Wir definieren diese anfangs-und Endzustände in CSS die @keyframes-Regel:

@keyframes Reaktor-anim {
aus {
transform: rotate(0deg);
}
{
transform: rotate(360deg);
}
}

Wir wollen, dass das element bei 0 Grad, und animieren Sie es, bis es erreicht 360 Grad. Und wir den Namen dieser animation, die als “Reaktor-anim.”

Das element, das wir animieren wollen .coil-contailer. Beachten Sie, das wir nicht definieren, welche Objekt zu animieren, doch wir haben nur definiert, der anfangs-und der Endzustand sowie die Namen der animation.

Wir müssen das element der animation, um wirksam zu sein. Wir tun es durch die Verwendung von animation-name<code> Eigenschaft auf <code>.coil-container:

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

Beachten Sie, Gaben wir auch die Dauer der animation mit animation-duration-Eigenschaft. Dies legt fest, wie viel Zeit Sie ergreifen sollten, um zu gehen von der “aus” – Zustand der “zu” – Zustand definiert mit der @keyframes-Regel.

Finden Sie die Stift-Arc Reactor-Leichtigkeit-In von Kunal Sarkar (@supersarkar) auf CodePen.

Wir müssen zwei Dinge geändert: wir wollen die animation gehen Sie auf unendlich, und wir wollen eine lineare animation. Sie können die animation sehen, ist langsam am Anfang, dann schnell, dann wieder langsam am Ende—dieses Verhalten ist definiert durch die timing-Funktion einer animation.

Lassen Sie diese änderungen vornehmen:

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

Wir verwendeten animation-iteration-count-Eigenschaft der animation, um das unendliche, und animation-timing-Funktion, um die animation linear ist, ist der Standardwert der animation-timing-Funktion ist einfach.

Finden Sie die Stift-Arc Reactor-Linear-Unendliche von Kunal Sarkar (@supersarkar) auf CodePen.

Kombinieren wir all diese Eigenschaften der animation…

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

…in eine Kurzschrift-Eigenschaft wie folgt:

animation: 3s unendlichen linearen Reaktor-anim;

Der Letzte Schliff in den Reaktor-Behälter

Unser Reaktor ist fertig, jetzt machen wir noch ein paar abschließende änderungen .Reaktor-container. Zuerst benötigen wir einen dunklen Kreis hinter dem Reaktor:

<div class=”fullpage-wrapper”>
<div class=”Reaktor-container”>
<!– dunklen Kreis hinter dem Reaktor –>
<div class=”Reaktor-container-inner circle-abs-center”></div>
<div class=”tunnel-Kreis-abs-center”></div>
<div class=”Kern-wrapper-Kreis-abs-center”></div>
<div class=”Kern-äußerer Kreis-abs-center”></div>
<div class=”core-inner circle-abs-center”></div>
<div class=”coil-container”>
<div class=”Spule 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=”Spule-Spule-6″></div>
<div class=”Spule-Spule-7″></div>
<div class=”coil-coil-8″></div>
</div>
</div>
</div>

Geben Sie einen dunklen hintergrund, und fügen Sie etwas Schein-Effekt auf:

.Reaktor-container-inner {
Höhe: 238px;
Breite: 238px;
background-color: rgb(22, 26, 27);;
box-shadow: 0px 0px 4px 1px #52fefe;
}

Finden Sie die Stift-Arc Reactor-Halbfinale von Kunal Sarkar (@supersarkar) auf CodePen.

Sehen Sie, wie der dunkle hintergrund und der Schein erzeugt einen Relief-Effekt?

Als Nächstes wollen wir das machen .rotator-Behälter-Runde und geben Sie es einige shadow und border, dann sind wir fertig:

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

Finden Sie die Stift-Iron Man Arc Reactor von Kunal Sarkar (@supersarkar) auf CodePen.

Prost! Unsere Arc-Reaktor ist fertig und sogar mit einer kleinen animation als zusätzlichen bonus. Auf dieser Ebene, könnten wir erkunden mit benutzerdefinierten Eigenschaften zu erstellen wiederverwendbare Variablen für unsere Farbe und Anzahl-Werte für einfachere Wartung. Ebenso könnten wir schauen in die mit einem Präprozessor wie Sass, Less oder PostCSS—Funktionen schreiben, die die mathematische lifting für uns. Würde gerne sehen, dass Beispiele wie diese in die Kommentare!