Iron Man ‘ s Arc Reaktoren ved Hjelp av CSS3 Forvandler og Animasjoner

0
48

Alright Iron Man-fans, brann opp din kode redaktører! Vi kommer til å gjøre Arc reaktoren fra Iron Man ‘ s passer i CSS. Her er det endelige resultatet vil se ut:

Se Penn Iron Man ‘ s Arc Reaktoren av Kunal Sarkar (@supersarkar) på CodePen.

Full Side Wrapper

Vi vil gjøre vårt Arc-reaktoren på en mørk full-side bakgrunnen. Her er vår kode for å lage en hel side wrapper element:

body {
margin: 0;
}

.fullpage-wrapper {
høyde: 100vh;
bakgrunn: radial-gradient(#353c44, #222931);
}

Hvorfor gjør vi erklærer ingen margin på kroppen? <Body> – element har noen margin satt til det som standard i user agent “stylesheet”. Dette hindrer at elementer innenfor <body> for å berøre kantene av skjermen. Siden vi ønsker at våre pakker for å dekke hele skjermen, kant til kant, vi fjernet som standard margin på <body> – element ved å sette den til 0.

Vi har gitt våre .fullpage-wrapper hele høyden av viewport. Vi trenger ikke å angi en bredde fordi en div er i full bredde som standard. Vi kunne ha gått med en annen tilnærming ved å sette både bredde og høyde av elementet til 100%, men det kommer med noen mulige ulemper som flere elementer som er lagt til skjermen. Ved hjelp av viewport enheter sikrer våre pakker alltid har full vertikal plass på skjermen, uansett hva det er, eller hvilke andre elementer er lagt til layout.

Vi brukte også en radial gradient på våre pakker ved hjelp av radial-gradient() CSS-funksjonen. Parametrene inne funksjonen er fargen start-og sluttpunktet. Så, midt på bakgrunn vil være mer #353c44 og mer #222931 mot kantene. Det er subtil, men en fin touch.

Sentrering Reaktoren Container

Før du begynner vi å skape vår reaktoren, la oss lage en beholder for det og sentrum det:

.reaktor-container {
bredde: 300px;
høyde: 300px;
margin: auto;
border: 1px stiplede #888;
}

Dette gir oss en 300px x 300px boks med stiplet ramme. Margin: auto; erklæring sikrer lik horisontal avstand.

Men hvorfor er det ikke center vertikalt?

Per CSS2 specs, hvis vi gir auto margen til venstre og høyre side, og deretter hele den tilgjengelige plassen vil bli delt likt til venstre og høyre marg. Dette er ikke det samme tilfelle for topp-og bunnmarg om. For topp-og bunnmarg den CSS2 spec sier:

Hvis margin-top, eller margin-bottom er auto, brukte verdi er 0.

Men vi har en god nyhet. Den flexbox layout følger nye regler for justering, og her er hva Flexbox spec har å si:

Før justering via rettferdiggjøre-innhold og justere selv, noen positive ledig plass som er distribuert til auto marginer i denne dimensjonen.

Dette betyr at hvis elementet i vederlaget er vist som en flex-elementet, og deretter margin: auto; vil fungere i begge retninger. La oss lage vår wrapper en flex-container og sine barn elementer flex elementer:

.fullpage-wrapper {
bredde: 100%;
høyde: 100vh;
bakgrunn: radial-gradient(#353c44, #222931);
skjerm: flex;
}

Det, det er mye bedre:

Det er mange andre metoder for å center elementer i HTML. Det er en detaljert guide på sentrering her på CSS-Triks for å lære mer.

Reaktorkjernen: Konsentriske Sirkler i CSS

Vi vet at nye elementer i HTML er opprettet fra venstre til høyre for venstre-til-høyre-språk), eller topp til bunn. Elementer aldri overlapper hverandre, og før du gir noen negativ margin.

Så, hvordan skal vi vise konsentriske sirkler? Vi vil bruke absolutt posisjonering.

Standard verdien av en posisjon eiendom er statisk. Statisk og relativ posisjonering følg flyten av topp til bunn og fra venstre til høyre. Det er imidlertid et absolutt posisjonert element er ikke behandlet som en del av dokumentflyten og kan plasseres hvor som helst ved hjelp av topp, høyre, bunn og venstre egenskaper.

La oss begynne med å lage den minste sirkelen:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<!– den minste sirkelen –>
<div class=”core-indre”></div>
</div>
</div>
.core-indre {
position: absolute;
bredde: 70px;
høyde: 70px;
border-radius: 50%;
grensen: 5px solid #1b4e5f;
background-color: #fff;
}

Vi trenger å center dette div. Du kan bli fristet til å bruke den samme flexbox konseptet vi brukt på reaktoren element til midten av denne sirkelen, så vel. Men, her er hva CSS2 spec har å si om innstillingen margin: auto; på absolutt posisjonerte elementer:

Hvis ingen av de tre (topp, høyde og nederst) er auto: Hvis både margin-top og margin-bottom er auto, løse ligningen under ekstra begrensning som de to marginer få like verdier.

Dette betyr at hvis en absolutt posisjonert element har noen verdi for topp -, høyde-og nederst til andre enn auto, og deretter sette topp-og bunnmarg til auto, vil center elementet vertikalt.

Samme tilfelle for horisontal sentrering: hvis en absolutt posisjonert element har noen verdi for venstre, bredde og høyre andre enn auto, og angi venstre og høyre marg for å automatisk sentrere element horisontalt.

Det betyr at vi ikke trenger flexbox layout for å sentrere en absolutt posisjonert element med kjent høyde og bredde. Vi må bare sørge for at vi gir noen verdi til topp, høyre, bunn og venstre andre enn auto. Så, vi vil bruke 0:

.core-indre {
position: absolute;
bredde: 70px;
høyde: 70px;
øverst: 0;
høyre: 0;
nederst: 0;
venstre: 0;
margin: auto;
border-radius: 50%;
grensen: 5px solid #1b4e5f;
background-color: #fff;
}

Vi ønsker ikke å gjenta disse fem linjer for alle konsentriske sirkler vi kommer til å ha, så la oss lage en egen klasse for denne. Vi ønsker heller ikke å definere border-radius: 50%; for alle divs at vi ønsker å vise som sirkler, så vi skal lage en klasse for det også:

.sirkel {
border-radius: 50%;
}

.abs-center {
position: absolute;
øverst: 0;
høyre: 0;
nederst: 0;
venstre: 0;
margin: auto;

}

.core-indre {
bredde: 70px;
høyde: 70px;
grensen: 5px solid #1b4e5f;
background-color: #fff;
}

Også, kan du legge disse nye klasser til å ut .core-indre-element:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<!– den minste sirkelen –>
<div class=”core-indre sirkel abs-center”></div>
</div>
</div>

Greit, vår konsentriske sirkel er sentrert. La oss gjøre det glød.

Men CSS ikke har noen “glød” eiendom.

Ikke bekymre deg, vi har box-shadow eiendom. I stedet for å gi skygge en mørk farge, vil vi gi den en lys farge for å få skyggen ser ut som glød. Ganske smart, ikke sant? 😉

La oss gjøre dette:

.core-indre {
bredde: 70px;
høyde: 70px;
grensen: 5px solid #1b4e5f;
background-color: #fff;
box-shadow: 0px 0px 7px 5px #52fefe;
}

La oss ta en pause og korrekt beskrivelse av box-shadow første fordi vi skal bruke det mye. Her er hva disse verdiene for box-shadow betyr i denne rekkefølge:

  • x-offset: hvor mye vi ønsker å presse skyggen på høyre side (x-aksen). Negative verdier vil presse skygge til venstre på siden.
  • y-offset: hvor mye vi ønsker å presse skyggen opp eller ned (y-aksen).
  • blur-radius: hvordan uklare vi ønsker at våre skygge for å være.
  • spread-radius: hvor mye vi ønsker at våre skygge til å spre seg.
  • farge: fargen på skyggen.

Spille med disse verdiene litt til å se deres effekter i sanntid.

I det virkelige liv, skygger ikke faller bare på utsiden av et objekt. Skyggene falle på objekter også. Tenk deg en grøft gravd av en hund, vil det ha en skygge inne i det, ikke sant?

Vi kan gi en skygge inne et element ved hjelp av inset søkeord i boksen-dimensjonering eiendom. For å gi et element både utenfor og inne i skyggen, vi bare skiller du dem med komma. La oss gjøre dette for å få en på innsiden og utsiden glød til våre reaktoren er indre kjerne:

.core-indre {
bredde: 70px;
høyde: 70px;
grensen: 5px solid #1B4e5f;
background-color: #fff;
box-shadow: 0px 0px 7px 5px #52fefe, 0px 0px 10px 10px #52fefe inset;
}

Nå det begynner å se ut sci-fi!

La oss lage en mer sirkel på toppen. Vi vil i den indre sirkel som skal vises på toppen av andre sirkler, så vi vil legge til nye sirkel divs *over* den indre sirkel i koden:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<!– den andre sirkelen –>
<div class=”core-ytre sirkelen abs-center”></div>
<!– den minste sirkelen –>
<div class=”core-indre sirkel abs-center”></div>
</div>
</div>

Elementene ned i koden, vises over på skjermen. Hvis vi setter core-ytre nedenfor core-indre i koden, og så core-indre vil ikke være synlig, fordi core-ytre vil dekke det.

La oss gi stil til ytre-kode. Den ytre kjernen vil være litt større enn den indre kjerne, og vi vil gi en ytre og indre glød til core-ytre også:

.core-ytre {
bredde: 120px;
høyde: 120px;
border: 1px solid #52fefe;
background-color: #fff;
box-shadow: 0px 0px 2px 1px #52fefe, 0px 0px 10px 5px #52fefe inset;
}

Jeg vil at du skal gjøre en ting: å se på skyggene (glød) og prøve å identifisere hvilke en er som en sirkel. Det er fire skygger og to sirkler (til nå).

Til slutt å designe kjernen, vil vi trenger en mer sirkel som vil bryte den indre og ytre sirkler:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<!– den tredje sirkelen –>
<div class=”core-wrapper sirkel abs-center”></div>
<!– den andre sirkelen –>
<div class=”core-ytre sirkelen abs-center”></div>
<!– den minste sirkelen –>
<div class=”core-indre sirkel abs-center”></div>
</div>
</div>

Dette vil være en litt større, og vil igjen ha samme skygger, vil vi bruke en mørk bakgrunn for core-wrapper:

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

Opprette Reaktoren Spoler og Roterer med CSS3 Forvandler

Vi har kjernen i reaktoren, nå trenger vi en tunnel rundt kjernen. Faktisk, kan vi skape en illusjon av en runde tunnel ved å tegne bare en sirkel litt større enn kjerne-wrapper. La oss gjøre det:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<!– den største sirkel –>
<div class=”tunnel sirkel abs-center”></div>
<!– den tredje sirkelen –>
<div class=”core-wrapper sirkel abs-center”></div>
<!– den andre sirkelen –>
<div class=”core-ytre sirkelen abs-center”></div>
<!– den minste sirkelen –>
<div class=”core-indre sirkel abs-center”></div>
</div>
</div>

…litt bredere og legge til samme glød til tunnelen:

.tunnel {
bredde: 220px;
høyde: 220px;
background-color: #fff;
box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe inset;
}

Våre tunnel er klar.

Sørg for at du ikke bare kopier lim inn koden. Ta en titt på den gløder av sirkler og identifisere hvilke glød er som en sirkel, enten det er utenfor glød eller innfelt glød.

Nå, vi trenger åtte spoler på denne tunnelen. Spoler er enkel rektangler, men den store utfordringen er at vi må spoler til å kjøre langs runde bane av tunnelen; ikke i rett linje.

En måte å gjøre dette på ville være å opprette åtte små rektangler, skift sitt senter til sentrum av reaktoren, og roter hver spole med et økende vinkel (i multipler av 45deg).

La oss ikke komplisere det og gjøre et rektangel coil på en gang:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<div class=”tunnel sirkel abs-center”></div>
<div class=”core-wrapper sirkel abs-center”></div>
<div class=”core-ytre sirkelen abs-center”></div>
<div class=”core-indre sirkel abs-center”></div>
<div class=”coil-1″></div>
</div>
</div>
.coil-1 {
position: absolute;
bredde: 30px;
høyde: 26px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

Nå, vi ønsker å plassere denne spolen i midten på toppen av tunnelen. Som dette:

Våre reaktor-beholderen er 300px x 300px, så center ligger i 150px fra toppen og venstre. Tunnelen er 220px bredt, så dens radius vil være 110px. Dette gir oss toppen forskyvning av spolen: 150px – 110px.

Vi kan holde til venstre på spolen for å 150px, men siden våre coil er 30px bredt, det vil skift midten av spolen ved 15 piksler til høyre, det er derfor vi trenger å trekke fra 15 piksler fra 150px å få til venstre forskyvning av spolen.

Vi kan beregne disse oss og setter verdien, eller vi kan bruke CSS calc () – funksjonen. La oss bruke CSS calc () – funksjonen til å beregne øverst og til venstre egenskaper av spolen:

.coil-1 {
position: absolute;
bredde: 30px;
høyde: 20 piksler;
øverst: calc(50% – 110px);
venstre: calc(50% – 15 piksler);
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

Som du kan se, calc () – funksjonen tar et matematisk uttrykk som argument og løser det.

Nå trenger vi åtte slike spoler, men de må ligge på tunnelen. For å gjøre det, som nevnt, vi kan ganske enkelt plassere åtte spoler på samme sted, så forvandle deres opphav til midten av reaktoren, og roter hver spole med en økning på 45 grader.

Vi trenger å oppdatere coil opprinnelse på grunn av standard er satt til midten av spolen; vi vil ha det på midten av reaktoren:

Vi vil bruke transform-opprinnelse-egenskapen til å angi opprinnelsen av spolen:

.coil-1 {
position: absolute;
bredde: 30px;
høyde: 20 piksler;
øverst: calc(50% – 110px);
venstre: calc(50% – 15 piksler);
transform-opprinnelse: 15 piksler 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

Den første verdien, 15 piksler, i transform-opprinnelse er x-forskyvning (horisontal avstand) fra det øverste venstre hjørnet av elementet, og den andre verdien, 110px, er y-offset (vertikal avstand) fra det øverste venstre hjørnet av elementet.

Spolen opprinnelse er nå i sentrum av reaktoren, la oss roter det 45 grader ved hjelp av CSS3 forvandle eiendommen og se hva som skjer:

.coil-1 {
position: absolute;
bredde: 30px;
høyde: 20 piksler;
øverst: calc(50% – 110px);
venstre: calc(50% – 15 piksler);
transform-opprinnelse: 15 piksler 110px;
forvandle: rotere(45deg);
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

Flott! Det er akkurat hva vi ønsker.

Før du oppretter alle de åtte spoler, la oss lage en spiral container div som skal inneholde alle de åtte spoler:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<div class=”tunnel sirkel abs-center”></div>
<div class=”core-wrapper sirkel abs-center”></div>
<div class=”core-ytre sirkelen abs-center”></div>
<div class=”core-indre sirkel abs-center”></div>
<!– spolen container –>
<div class=”coil-container”>
<div class=”coil coil-1″></div>
</div>
</div>
</div>

Du vil legge merke til har vi også lagt til en klasse “coil” til “coil-1” – element. Vi vil holde alle vanlige stiler for spoler i “spiral” klasse, og den enkelte coil element klasser vil bare ha sin vinkel:

.coil-container {
position: relative;
bredde: 100%;
høyde: 100%;
}

.coil {
position: absolute;
bredde: 30px;
høyde: 20 piksler;
øverst: calc(50% – 110px);
venstre: calc(50% – 15 piksler);
transform-opprinnelse: 15 piksler 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

.coil-1 {
forvandle: rotere(45deg);
}

Produksjonen vil forbli det samme.

Nå, la oss gjøre alle de åtte spoler inne .coil-container:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<div class=”tunnel sirkel abs-center”></div>
<div class=”core-wrapper sirkel abs-center”></div>
<div class=”core-ytre sirkelen abs-center”></div>
<div class=”core-indre sirkel abs-center”></div>
<!– spolen 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>

…og gi forskjellige rotasjoner til alle spoler (økning på 45 grader):

.coil {
position: absolute;
bredde: 30px;
høyde: 20 piksler;
øverst: calc(50% – 110px);
venstre: calc(50% – 15 piksler);
transform-opprinnelse: 15 piksler 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}

.coil-1 {
forvandle: rotere(0deg);
}

.coil-2 {
forvandle: rotere(45deg);
}

.coil-3 {
forvandle: rotere(90deg);
}

.coil-4 {
forvandle: rotere(135deg);
}

.coil-5 {
forvandle: rotere(180deg);
}

.coil-6 {
forvandle: rotere(225deg);
}

.coil-7 {
forvandle: rotere(270deg);
}

.coil-8 {
forvandle: rotere(315deg);
}

Våre reaktoren er nesten klar.

Animerte Spoler Med CSS3 Animasjoner

I Iron Man ‘ s Arc reaktoren, spoler ikke bevege seg, men de vil i vår reaktoren. Vi vil animere spoler for å rotere langs tunnelen, og vil bruke CSS3 animasjoner for dette—ingen JavaScript.

For å lage en animering, du trenger å vite for første og siste stater på objektet du kommer til å animere. Vi definerer disse innledende og avsluttende stater i CSS ved å bruke @keyframes på-regelen:

@keyframes reaktor-anim {
fra {
forvandle: rotere(0deg);
}
{
forvandle: rotere(360deg);
}
}

Vi vil at elementet skal være på 0 grader og animere den, helt til den når 360 grader. Og vi kalte denne animasjonen som “reaktor-anim.”

Elementet vi ønsker å animere .coil-contailer. Legg merke, hadde vi ikke definere som objekt for å animere ennå, vi har bare definert den første og den endelige tilstand og navn på animasjonen.

Vi trenger å koble elementet til animasjonen for å ta effekt. Vi gjør det ved hjelp av animasjon-navn<code> eiendom på <code>.coil-container:

.coil-container {
position: relative;
bredde: 100%;
høyde: 100%;
animasjon-navn: reaktor-anim;
animasjon-varighet: 3s;
}

Legg merke, vi ga også varigheten av animasjon ved hjelp av animasjon-varighet eiendom. Denne definerer hvor mye tid det bør ta å gå fra “fra” staten “til” stat, definert ved hjelp @keyframes på-regelen.

Se Penn Arc-Reaktor-Lette-av Kunal Sarkar (@supersarkar) på CodePen.

Vi trenger å endre to ting her: vi vil animasjonen til å gå på uendelig, og vi ønsker en lineær animasjon. Du kan se animasjonen er treg i begynnelsen, så fort, så igjen sakte på slutten—dette er definert av timing funksjon av en animasjon.

La oss gjøre disse endringene:

.coil-container {
position: relative;
bredde: 100%;
høyde: 100%;
animasjon-navn: reaktor-anim;
animasjon-varighet: 3s;
animasjon-iterasjon-count: uendelig;
animasjon-timing-funksjon: lineær;
}

Vi brukte animasjon-iterasjon-count-egenskapen til å angi animasjon til uendelig, og animasjon-timing-funksjon for å lage animasjon lineær, standard verdi av animasjon-timing-funksjonen er enkel.

Se Penn Arc-Reaktor-Lineær-Uendelig av Kunal Sarkar (@supersarkar) på CodePen.

Vi kan kombinere alle disse animasjon egenskaper…

animasjon-navn: reaktor-anim;
animasjon-varighet: 3s;
animasjon-iterasjon-count: uendelig;
animasjon-timing-funksjon: lineær;

…i en kort eiendom som dette:

animasjon: 3s uendelig lineær reaktor-anim;

Siste hånd på verket til Reaktoren Container

Våre reaktoren er klar, la oss nå gjøre noen siste endringer .reaktor-container. For det første, vi vil trenge en mørk sirkel bak reaktoren:

<div class=”fullpage-wrapper”>
<div class=”reaktor-container”>
<!– mørk sirkel bak reaktoren –>
<div class=”reaktor-container-indre sirkel abs-center”></div>
<div class=”tunnel sirkel abs-center”></div>
<div class=”core-wrapper sirkel abs-center”></div>
<div class=”core-ytre sirkelen abs-center”></div>
<div class=”core-indre sirkel 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>

La oss gi en mørk bakgrunn, og legg til litt glød til det:

.reaktor-container-indre {
høyde: 238px;
bredde: 238px;
background-color: rgb(22, 26, 27);;
box-shadow: 0px 0px 4px 1px #52fefe;
}

Se Penn Arc-Reaktor-Semi-Finalen ved å Kunal Sarkar (@supersarkar) på CodePen.

Se hvordan den mørke bakgrunnen og glød lager et relieff effekt?

Neste, la oss gjøre det .rotator-beholderen rundt og gi det litt skygge og grensen, så vi har gjort:

.reaktor-container {
bredde: 300px;
høyde: 300px;
margin: auto;
border: 1px stiplede #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;
}

Se Penn Iron Man ‘ s Arc Reaktoren av Kunal Sarkar (@supersarkar) på CodePen.

Jubel! Våre Arc Reaktoren er klar, og selv med en liten animasjon som en ekstra bonus. For å nivå opp dette, vi kan utforske ved hjelp av egendefinerte egenskaper for å lage gjenbrukbare variabler for våre farge og antall verdier for enklere vedlikehold. På samme måte, kunne vi se inn ved hjelp av en preprosessor—som Sass, Mindre eller PostCSS—for å skrive inn funksjoner som gjør det matematiske løft for oss. Ville elske å se eksempler, som at det i kommentarfeltet!