Iron Man ‘ s Arc Reactor met Behulp van CSS3 Transformaties en Animaties

0
46

Oke Iron Man fans, brand-up van uw code redactie! We zijn gaan maken van de Arc reactor van Iron Man ‘ s suit in CSS. Hier is wat het resultaat zal er als volgt uitzien:

Zie de Pen Iron Man ‘ s Arc Reactor door Kunal met de ipad heeft (@supersarkar) op CodePen.

De Volledige Pagina Wrapper

Wij zullen ons Arc reactor op een donkere full-pagina-achtergrond. Hier is onze code om een volledige pagina wrapper element:

body {
margin: 0;
}

.fullpage-wrapper {
hoogte: 100vh;
achtergrond: radiaal-gradient(#353c44, #222931);
}

Waarom doen we verklaren geen marge op het lichaam? De <body> – element heeft een bepaalde marge is ingesteld om het standaard in de user-agent stylesheet. Dit voorkomt dat de elementen binnen het <body> raak de randen van het scherm. Omdat we willen dat onze wrapper om te bestrijken het gehele scherm van rand tot rand, we verwijderd van die standaard-marge op de <body> element door in te stellen op 0.

We hebben de onze .fullpage-wrapper de volledige hoogte van de viewport. We hebben niet een breedte te specificeren omdat een div is in volle breedte op standaard. We kunnen gaan voor een andere benadering door de breedte en hoogte van het element tot 100%, maar dat komt met een aantal mogelijke nadelen als er meer elementen toegevoegd aan het scherm. Met kijkvenster-eenheden zorgt ervoor dat onze wrapper altijd neemt de volledige verticale ruimte van het scherm, ongeacht wat het is of wat andere elementen worden toegevoegd aan de lay-out.

We gebruikten ook een radiaal verloop in ons wrapper met radiaal verloop() CSS-functie. De parameters in de functie zijn de kleur start-en eindpunt. Dus, het centrum van de achtergrond zal meer #353c44 en meer #222931 naar de randen. Het is subtiel, maar wel een leuke touch.

Het centreren van de Reactor Container

Voordat we beginnen met het maken van onze reactor, laten we een container voor en center:

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

Dit geeft ons een 300px x 300px doos met gestippelde rand. De margin: auto; verklaring draagt zorg voor een gelijke horizontale afstand.

Maar waarom het niet midden verticaal?

Per CSS2 specs, wanneer wij de auto marge aan de linker-en rechterkant, dan is de hele beschikbare ruimte verdeeld naar links en rechts. Dit is niet hetzelfde geval voor de boven-en ondermarge al. Voor boven-en ondermarge van de CSS2 spec zegt:

Als margin-top of margin-bottom zijn auto, hun gebruikte waarde is 0.

Wij hebben echter goed nieuws. De flexbox lay-out volgt de nieuwe regels van de aanpassing, en dit is wat de Flexbox spec te zeggen heeft:

Voorafgaand aan de uitlijning via rechtvaardigen-de inhoud en de lijn-zelf, een positieve vrije ruimte wordt verdeeld over de automatische marges in die dimensie.

Dit betekent dat als het element in overweging wordt weergegeven als een flex-item vervolgens margin: auto; werkt in beide richtingen. Laten we ons wrapper een flex-container en de onderliggende elementen flex-items:

.fullpage-wrapper {
breedte: 100%;
hoogte: 100vh;
achtergrond: radiaal-gradient(#353c44, #222931);
display: flex;
}

Dat is veel beter:

Er zijn vele andere methoden om het centrum van elementen in HTML. Er is een gedetailleerde gids over het centreren hier op CSS-Tricks om meer te leren.

De reactorkern: Concentrische Cirkels in CSS

We weten dat er nieuwe elementen in HTML worden gemaakt van links naar rechts (voor links-naar-rechts talen), of van boven naar beneden. Elementen nooit overlappen, totdat u een aantal negatieve marge.

Dus, hoe zijn we weer concentrische cirkels? We zullen gebruik maken van absolute positionering.

De standaard waarde van de eigenschap position is statisch. Statische en relatieve positionering volg de stroming van boven naar beneden en van links naar rechts. Echter, een absoluut gepositioneerd element is niet behandeld als een deel van de documentenstroom en overal kan worden geplaatst met behulp van de top, right, bottom en left eigenschappen.

Laten we beginnen met de kleinste cirkel:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<!– de kleinste cirkel –>
<div class=”kern-inner”></div>
</div>
</div>
.core-innerlijke {
position: absolute;
breedte: 70px;
height: 70px;
border-radius: 50%;
border: 5px solid #1b4e5f;
background-color: #fff;
}

We moeten center deze div. Je zou in de verleiding om hetzelfde flexbox concept dat we op de reactor element te midden van deze cirkel. Maar, hier is wat CSS2 spec te zeggen heeft over het instellen van margin: auto; op de absoluut gepositioneerde elementen:

Indien geen van de drie (top, hoogte en bodem) zijn de auto: Als beide margin-top en margin-bottom zijn auto, het oplossen van de vergelijking onder de extra beperking dat de twee zijden gelijke waarden.

Dit betekent dat als een absoluut gepositioneerd element heeft een waarde voor de top, de hoogte en de onderkant van andere dan de auto, dan is het instellen van de bovenste en onderste marge auto zullen het element verticaal.

Hetzelfde is het geval voor horizontaal centreren: als een absoluut gepositioneerd element heeft een waarde voor links, breedte en ander recht dan van de auto, dan is het instellen van de linker-en rechter marge auto zullen het element horizontaal.

Dat betekent dat we niet moeten flexbox lay-out om het centrum van een absoluut gepositioneerd element met een bekende hoogte en breedte. We moeten gewoon zorgen dat we geven een bepaalde waarde te boven, rechts, onder en links van andere dan de auto. Dus, zullen we gebruik maken van 0:

.core-innerlijke {
position: absolute;
breedte: 70px;
height: 70px;
top: 0;
rechts: 0;
bottom: 0;
links: 0;
margin: auto;
border-radius: 50%;
border: 5px solid #1b4e5f;
background-color: #fff;
}

We willen niet te herhalen deze vijf lijnen in voor alle concentrische cirkels we gaan, dus maken we een aparte klasse. We willen ook niet te definiëren border-radius: 50%; voor alle divs die we willen weergegeven als cirkels, dus maken we een klasse voor dat:

.cirkel {
border-radius: 50%;
}

.abs-center {
position: absolute;
top: 0;
rechts: 0;
bottom: 0;
links: 0;
margin: auto;

}

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

Ook het toevoegen van deze nieuwe klassen .core-innerlijke element:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<!– de kleinste cirkel –>
<div class=”kern-binnenste cirkel abs-center”></div>
</div>
</div>

Oke, onze concentrische cirkel gecentreerd is. Let ‘ s make it glow.

Maar CSS is geen “glow” eigenschap.

Maak je geen zorgen, wij hebben de box-shadow eigendom. In plaats van het geven van de schaduw van een donkere kleur, geven wij het een lichte kleur te maken van de schaduw lijken gloed. Best slim, niet? 😉

Dit gaan we doen:

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

Laten we een pauze nemen en begrijpen van de syntaxis van box-shadow eerste omdat wij gebruiken het veel. Hier zijn wat deze waarden voor box-shadow bedoel in die volgorde:

  • x-offset: hoe veel we willen duwen de schaduw aan de rechterkant (x-as). Bij negatieve waarden wordt de druk op de schaduw aan de linkerkant.
  • y-offset: hoe veel we willen duwen de schaduw omhoog of omlaag (y-as).
  • vervaging-radius: hoe wazig we willen dat onze schaduw.
  • spread-radius: hoeveel willen we onze schaduw te verspreiden.
  • kleur: de kleur van de schaduw.

Spelen met deze waarden een beetje om hun effecten in real-time.

In het echte leven, schaduwen laat vallen niet alleen de buitenzijde van een object. Schaduwen laten vallen op de objecten. Stel je een put gegraven door een hond, zal een schaduw in het recht?

We geven een schaduw binnen een element met behulp van de inzet zoekwoord in de box-sizing eigendom. Om een element zowel van binnen en van buiten schaduw, we gewoon van elkaar scheiden met een komma. Laten we dit doen voor een buiten-en de binnenkant gloed in onze reactor innerlijke kern:

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

Nu het begint er op te lijken sci-fi!

We maken nog een cirkel op de top. We willen de binnenste cirkel weer te geven op de top van de andere cirkels, dus we zullen het toevoegen van nieuwe cirkel divs *boven* de binnenste cirkel in de code:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<!– de tweede cirkel –>
<div class=”kern-buitenste cirkel abs-center”></div>
<!– de kleinste cirkel –>
<div class=”kern-binnenste cirkel abs-center”></div>
</div>
</div>

De elementen af in de code, zijn weergegeven boven aan het scherm. Als we de kern-outer hieronder de core-binnen in de code, dan kern-inner niet zichtbaar zal zijn, omdat de core-buiten de dekking.

Geef stijl aan de buitenkant van de code. De buitenste kern zal een beetje groter dan de binnenste kern en geven wij een uiterlijke en innerlijke gloed van de core-outer ook:

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

Ik wil u één ding: kijk naar de schaduwen (glow) en proberen te achterhalen wat een is van die cirkel. Er zijn vier schaduwen en twee cirkels (tot nu toe).

Om te eindigen met het ontwerpen van de kern, moeten we nog een cirkel die wordt doorlopen van de binnenste en buitenste cirkels:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<!– de derde cirkel –>
<div class=”kern-wrapper cirkel abs-center”></div>
<!– de tweede cirkel –>
<div class=”kern-buitenste cirkel abs-center”></div>
<!– de kleinste cirkel –>
<div class=”kern-binnenste cirkel abs-center”></div>
</div>
</div>

Deze zal een beetje groter, en zal weer dezelfde schaduwen, zullen we gebruik maken van een donkere achtergrond voor de core-wrapper:

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

Het maken van smoorspoelen en Draaien met CSS3 Transformaties

Wij hebben de kern van de reactor, nu moeten we een tunnel rond de kern. Eigenlijk kunnen we het creëren van een illusie van een ronde tunnel door het tekenen van het gewoon nog een cirkel iets groter dan de core-wrapper. Laten we het doen:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<!– de grootste cirkel –>
<div class=”tunnel cirkel abs-center”></div>
<!– de derde cirkel –>
<div class=”kern-wrapper cirkel abs-center”></div>
<!– de tweede cirkel –>
<div class=”kern-buitenste cirkel abs-center”></div>
<!– de kleinste cirkel –>
<div class=”kern-binnenste cirkel abs-center”></div>
</div>
</div>

…een beetje breder en voeg dezelfde gloed van de tunnel:

.tunnel {
breedte: 220px;
hoogte: 220px;
background-color: #fff;
box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe inzet;
}

Onze tunnel is klaar.

Zorg ervoor dat u niet alleen maar kopieer en plak je de code. Neem een kijkje in de gloed van de kringen en het identificeren van die gloed van die cirkel, of het is buiten gloed of inzet gloed.

Nu moeten we acht rollen op deze tunnel. De rollen zijn eenvoudig rechthoeken, maar de grote uitdaging is dat we de rollen om te draaien langs het ronde pad van de tunnel; niet in rechte lijn.

Een manier om dit te doen zou zijn om te maken, acht kleine rechthoeken, verschuiven hun het midden van de reactor, en draaien elke spoel door een toenemende hoek (in veelvouden van 45deg).

Laten we het niet ingewikkelder en maak een rechthoek met spoel op een moment:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<div class=”tunnel cirkel abs-center”></div>
<div class=”kern-wrapper cirkel abs-center”></div>
<div class=”kern-buitenste cirkel abs-center”></div>
<div class=”kern-binnenste cirkel abs-center”></div>
<div class=”coil-1″></div>
</div>
</div>
.coil-1 {
position: absolute;
breedte: 30 met een afwijkende;
height: 26px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inzet;
}

Nu willen we op deze plaats de spoel in het midden aan de bovenkant van de tunnel. Zoals deze:

Onze reactor-container is 300px x 300 pixels, dus het centrum is op 150px van boven en links. De tunnel is 220px breed, zodat de straal zal worden 110px. Dit geeft ons de top verschuiving van de rol: 150px – 110px.

Houden We links van de spoel te 150px, maar sinds de spoel wordt 30 met een afwijkende breed, het zal een verschuiving in het midden van de spoel door 15px naar rechts, dat is de reden waarom we moeten aftrekken 15px van 150px om de links verschuiving van de spoel.

Kunnen We berekenen deze onszelf en zet de waarde, of we kunnen gebruik maken van de CSS calc() functie. Laten we gebruik maken van de CSS-calc() functie voor het berekenen van de eigenschappen top en left van de spoel:

.coil-1 {
position: absolute;
breedte: 30 met een afwijkende;
hoogte: 20px;
top: calc(50% – 110px);
links: calc(50% – 15px);
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inzet;
}

Zoals u kunt zien, de calc() functie neemt een rekenkundige expressie als argument is en lost die op.

Nu moeten we acht een dergelijke rollen, maar ze moet liggen op de tunnel. Om dat te doen, zoals besproken, kunnen we gewoon de acht rollen op dezelfde plaats, dan is de transformatie van hun oorsprong tot aan het midden van de reactor, en draaien elke spoel door een toename van 45 graden.

We moeten het bijwerken van de spoel is de oorsprong, want het is standaard ingesteld op het midden van de spoel; we willen het in het midden van de reactor:

We zullen gebruik maken van het transformeren van oorsprong van de goederen om de oorsprong van de spoel:

.coil-1 {
position: absolute;
breedte: 30 met een afwijkende;
hoogte: 20px;
top: calc(50% – 110px);
links: calc(50% – 15px);
transform-herkomst: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inzet;
}

De eerste waarde, 15px, in het transformeren van oorsprong is de x-offset (horizontale afstand) van de linker-bovenhoek van het element, en de tweede waarde, 110px, is de y-offset (verticale afstand) van de linker-bovenhoek van het element.

De spoel is de oorsprong is nu in het midden van de reactor, het laten draaien van 45 graden met de CSS3 eigenschap transform en zie wat er gebeurt:

.coil-1 {
position: absolute;
breedte: 30 met een afwijkende;
hoogte: 20px;
top: calc(50% – 110px);
links: calc(50% – 15px);
transform-herkomst: 15px 110px;
transform: rotate(45deg);
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inzet;
}

Geweldig! Dat is precies wat we willen.

Voor het maken van alle acht rollen, maken we een spoel container div, dat zal bevatten alle acht rollen:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<div class=”tunnel cirkel abs-center”></div>
<div class=”kern-wrapper cirkel abs-center”></div>
<div class=”kern-buitenste cirkel abs-center”></div>
<div class=”kern-binnenste cirkel abs-center”></div>
<!– de spoel container –>
<div class=”spoel-container”>
<div class=”coil coil-1″></div>
</div>
</div>
</div>

U zult merken we ook nog een klasse “coil” naar de “coil-1” – element. Wij houden alle voorkomende stijlen voor het spoelen in de “coil” klasse, en de individuele coil element lessen zullen alleen hun rotatiehoek:

.rol-container {
position: relative;
breedte: 100%;
height: 100%;
}

.spoel {
position: absolute;
breedte: 30 met een afwijkende;
hoogte: 20px;
top: calc(50% – 110px);
links: calc(50% – 15px);
transform-herkomst: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inzet;
}

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

De uitgang blijft hetzelfde.

Nu, laten we ervoor zorgen dat alle acht rollen binnen .rol-container:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<div class=”tunnel cirkel abs-center”></div>
<div class=”kern-wrapper cirkel abs-center”></div>
<div class=”kern-buitenste cirkel abs-center”></div>
<div class=”kern-binnenste cirkel abs-center”></div>
<!– de spoel container –>
<div class=”spoel-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>

…en geven verschillende rotaties om alle rollen (in stappen van 45 graden):

.spoel {
position: absolute;
breedte: 30 met een afwijkende;
hoogte: 20px;
top: calc(50% – 110px);
links: calc(50% – 15px);
transform-herkomst: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inzet;
}

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

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

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

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

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

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

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

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

Onze reactor is bijna klaar.

Het animeren van de Spoelen Met CSS3-Animaties

In Iron Man ‘ s Arc reactor, de rollen niet bewegen, maar ze zal in onze reactor. We zullen animeren de rollen om te draaien langs de tunnel, en zal gebruik maken van CSS3-animaties voor geen JavaScript.

Om een animatie te maken, moet u weten de eerste en laatste-staten van het object dat je gaat om te animeren. We definiëren deze eerste en laatste-staten, in CSS via @keyframes op-regel:

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

We willen het element te worden bij 0 graden en animeren tot het bereiken van 360 graden. En wij noemden deze animatie als ‘ reactor-anim.”

Het element dat we willen animeren is .spoel-contailer. Merken, we niet te bepalen welk object animeren nog, we hebben alleen een omschrijving van de eerste en de laatste staat en de naam van de animatie.

We moeten de koppeling van het element aan de animatie om te voeren. We doen dit door het gebruik van animatie-naam<code> goederen <code>.rol-container:

.rol-container {
position: relative;
breedte: 100%;
height: 100%;
animatie-naam: reactor-anim;
animatie-duur: 3s;
}

Merken we ook gaf de duur van de animatie met behulp van animatie-duur pand. Dit bepaalt hoe veel tijd moet nemen om van de “uit” staat op “aan” staat gedefinieerd met behulp van de @keyframes op-regel.

Zie de Pen Arc-Reactor-Gemak-door Kunal met de ipad heeft (@supersarkar) op CodePen.

We moeten veranderen om twee dingen: we willen de animatie te gaan op oneindig en we willen een lineaire animatie. U kunt de animatie is langzaam in het begin, dan snel, dan weer langzaam aan het einde van dit gedrag wordt bepaald door de timing van de functie van een animatie.

Laten we deze wijzigingen:

.rol-container {
position: relative;
breedte: 100%;
height: 100%;
animatie-naam: reactor-anim;
animatie-duur: 3s;
animatie-iteratie-count: oneindig;
animatie-timing-function: lineair;
}

We gebruikten animatie-iteratie-count eigenschap stelt de animatie in het oneindige, en animatie-timing-function om de animatie lineair is, is de standaard waarde van animatie-timing-function is gemak.

Zie de Pen Arc-Reactor-Lineaire-Oneindig door Kunal met de ipad heeft (@supersarkar) op CodePen.

We kunnen al deze combineren animatie-eigenschappen…

animatie-naam: reactor-anim;
animatie-duur: 3s;
animatie-iteratie-count: oneindig;
animatie-timing-function: lineair;

…in een steno-eigendom als dit:

animatie: 3s oneindige lineaire reactor-anim;

Laatste hand gelegd aan de Reactor Container

Onze reactor is klaar, nu laten we een paar laatste wijzigingen aan de .reactor-container. Eerst zullen we moeten een donkere kring achter de reactor:

<div class=”fullpage-wrapper”>
<div class=”reactor-container”>
<!– donkere kring achter de reactor –>
<div class=”reactor-container-binnenste cirkel abs-center”></div>
<div class=”tunnel cirkel abs-center”></div>
<div class=”kern-wrapper cirkel abs-center”></div>
<div class=”kern-buitenste cirkel abs-center”></div>
<div class=”kern-binnenste cirkel abs-center”></div>
<div class=”spoel-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>

Laten we een donkere achtergrond en voeg wat glans aan het:

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

Zie de Pen Arc-Reactor-Halve Finale door Kunal met de ipad heeft (@supersarkar) op CodePen.

Zie hoe de donkere achtergrond en de gloed ontstaat een reliëf-effect?

Vervolgens laten we de .rotator-container ronde en geef het wat schaduw en de rand, dan zijn we klaar:

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

Zie de Pen Iron Man ‘ s Arc Reactor door Kunal met de ipad heeft (@supersarkar) op CodePen.

Proost! Onze Arc-Reactor is klaar en zelfs met een kleine animatie als een toegevoegde bonus. Om het niveau van dit, wij kunnen onderzoeken met behulp van aangepaste eigenschappen maken van herbruikbare variabelen voor onze kleur en het aantal waarden voor gemakkelijker onderhoud. Ook kunnen we kijken naar het gebruik van een preprocessor—als Sass, Minder of PostCSS—om functies te schrijven die de wiskundige heffen voor ons. Zou graag een aantal voorbeelden zien, zoals dat in de comments!