Iron Man ‘ s Arc Reaktorn med Hjälp av CSS3 Förvandlar och Animationer

0
61

Okej Iron Man-fans, brand upp din kod redaktionen! Vi kommer att göra Arc reaktorn från Iron Man-kostym i CSS. Här är vad slutresultatet kommer att se ut:

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

Helsida Omslag

Vi kommer att göra vårt Arc reaktorn på en mörk helsida i bakgrunden. Här är vår kod för att göra en helsida omslag element:

body {
margin: 0;
}

.helsida-wrapper {
höjd: 100vh;
bakgrund: radial gradient(#353c44, #222931);
}

Varför gör vi förklara någon marginal på kroppen? <Body> – elementet har en viss marginal satt till den som standard i user agent stylesheet. Detta förhindrar att delar inuti <body> – att röra vid kanterna på skärmen. Eftersom vi vill att våra omslag för att täcka hela skärmen, från kant till kant, att vi tar bort som standard marginal på <body> – elementet genom att sätta den till 0.

Vi har gett vår .helsida-wrapper full höjd på visningsområdet. Vi behöver inte ange en bredd eftersom en div är full bredd som standard. Vi kunde ha gått med en annan metod genom att ange både bredd och höjd av elementet till 100% men det kommer med vissa nackdelar som fler element läggs till på skärmen. Med hjälp av virtuella enheter säkerställer vår wrapper alltid upptar hela vertikalt utrymme på skärmen, oavsett vad det är eller vad andra element läggs till i layouten.

Vi använde oss också av en radiell övertoning på våra omslag med radial gradient() CSS-funktion. De parametrar inuti funktionen är färgen start-och slutpunkt. Så, i mitten av bakgrunden kommer att vara mer #353c44 och mer #222931 mot kanterna. Det är subtilt, men en fin touch.

Centrering Reaktorn Behållare

Innan vi börja skapa våra reaktorn, låt oss skapa en behållare för det och center:

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

Detta ger oss en 300px x 300px box med streckad kant. Den margin: auto; förklaring garanteras samma horisontella avstånd.

Men varför det inte centreras vertikalt?

Per CSS2 specifikationer, om vi ger auto marginal till vänster och höger sida, då hela det tillgängliga utrymmet kommer att delas lika till vänster och höger marginal. Detta är inte det samma gäller för övre och nedre marginal ändå. För övre och nedre marginal CSS2 spec säger:

Om margin-top, eller margin-bottom är auto, deras värde som används är 0.

Vi har dock en god nyhet. Den flexbox layout följer nya regler för anpassning, och här är vad Flexbox spec har att säga:

Före justering via motivera-innehåll och anpassa-sig själv, något positivt fritt utrymme distribueras till auto marginaler i den dimensionen.

Detta innebär att om del med hänsyn visas som en flex-post, då margin: auto; kommer att arbeta i båda riktningarna. Låt oss göra vår wrapper en flex-behållaren och dess underordnade element flex punkter:

.helsida-wrapper {
width: 100%;
höjd: 100vh;
bakgrund: radial gradient(#353c44, #222931);
display: flex;
}

Det är mycket bättre:

Det finns många andra metoder för att centrala element i HTML. Det finns en utförlig guide på centrering här på CSS-Tricks för att lära sig mer.

Reaktorhärden: Koncentriska Cirklar i CSS

Vi vet att nya element i HTML är skapat från vänster till höger (till vänster-till-höger språk), eller topp till botten. Delar aldrig överlappar varandra, tills du ge några negativa marginalen.

Så, hur ska vi visa koncentriska cirklar? Vi kommer att använda absolut positionering.

Det förvalda värdet av position egenskapen är statisk. Statisk och relativ positionering följa flödet av uppifrån och ned och från vänster till höger. Dock en helt placerade element inte behandlas som en del av dokumentflödet och kan placeras var som helst med hjälp av top, right, bottom och left egenskaper.

Låt oss börja med att skapa den minsta cirkeln:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<!– den minsta cirkeln –>
<div class=”core-inre”></div>
</div>
</div>
.core-inre {
position: absolute;
bredd: 70px;
height: 70px;
border-radius: 50%;
gränsen: 5px solid #1b4e5f;
background-color: #fff;
}

Vi behöver center div. Du kanske frestas att tillämpa samma flexbox koncept använde vi på reaktor element till centrum för en cirkel liksom. Men, det här är vad CSS2 spec har att säga om att margin: auto; på helt placerade element:

Om ingen av de tre (top, höjd och botten) är auto: Om både marginal-top och margin-bottom är auto, lösa ekvationen under extra tvång att två marginaler får samma värden.

Detta innebär att om en absolut positionerat element har något värde för toppen, höjd och botten annat än auto, kan du ställa in den övre och nedre marginalen till auto center elementet vertikalt.

Samma gäller för horisontell centrering: om en helt placerade element har något värde för vänster, bredd och rätt annat än auto, kan du ställa in vänster och höger marginal till auto center elementet horisontellt.

Det betyder att vi inte behöver flexbox layout till center för en absolut positionerat element med känd höjd och bredd. Vi måste bara se till att vi ger något värde till top, right, bottom och left andra än auto. Så, vi kommer att använda 0:

.core-inre {
position: absolute;
bredd: 70px;
height: 70px;
top: 0;
rätt: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 50%;
gränsen: 5px solid #1b4e5f;
background-color: #fff;
}

Vi vill inte upprepa dessa fem rader för alla koncentriska cirklar vi kommer att ha, så låt oss skapa en separat klass för detta. Vi vill inte heller att definiera border-radius: 50%, för alla divar som vi vill visa som cirklar, så vi kommer att skapa en klass för att också:

.cirkeln {
border-radius: 50%;
}

.abs-center {
position: absolute;
top: 0;
rätt: 0;
bottom: 0;
left: 0;
margin: auto;

}

.core-inre {
bredd: 70px;
height: 70px;
gränsen: 5px solid #1b4e5f;
background-color: #fff;
}

Lägg också till dessa nya klasser .core-inre del:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<!– den minsta cirkeln –>
<div class=”core-inre cirkeln abs-center”></div>
</div>
</div>

Okej, vår koncentrisk cirkel är centrerad. Låt oss göra det lyser.

Men CSS inte har någon “glow” egendom.

Oroa dig inte, vi har box-shadow egendom. Istället för att ge skugga en mörk färg, kommer vi att ge det en ljus färg för att göra skuggan ser ut som glöd. Ganska smart är inte det? 😉

Låt oss göra detta:

.core-inre {
bredd: 70px;
height: 70px;
gränsen: 5px solid #1b4e5f;
background-color: #fff;
box-shadow: 0px 0px 7px 5px #52fefe;
}

Låt oss ta en paus och förstå syntaxen för box-shadow först eftersom vi kommer att använda den en hel del. Här är vad dessa värden för box-shadow menar, i denna ordning:

  • x-offset: hur mycket vi vill driva skugga på höger sida (x-axeln). Negativa värden kommer att driva skuggan till vänster.
  • y-offset: hur mycket vi vill driva skuggan uppåt eller nedåt (y-axeln).
  • blur-radius: hur suddiga som vi vill att vår skugga för att vara.
  • spridning-radius: hur mycket vi vill att vår skugga att sprida sig.
  • färg: färgen på skuggan.

Spela med dessa värden lite för att se deras effekter i realtid.

I verkliga livet, skuggor släppa inte bara utanför ett objekt. Skuggor på objekt också. Tänk dig att en grop grävs av en hund, det kommer att ha en skugga inne i det, rätt?

Vi kan ge en skugga inuti ett element med invändig sökord i rutan-dimensionering egendom. För att ge ett element både utanför och inne i skuggan, vi har helt enkelt separera dem med kommatecken. Låt oss göra detta för att få en utanför och en inuti glöd till vår reaktorns inre kärna:

.core-inre {
bredd: 70px;
height: 70px;
gränsen: 5px solid #1B4e5f;
background-color: #fff;
box-shadow: 0px 0px 7px 5px #52fefe, 0px 0px 10px 10px #52fefe infälld;
}

Nu det börjar se sci-fi!

Låt oss skapa en mer cirkel på toppen. Vi vill att den inre cirkeln för att visa på toppen av andra kretsar, så kommer vi att lägga till nya cirkeln divar * * * ovan* den inre cirkeln i koden:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<!– den andra cirkeln –>
<div class=”core-yttre cirkeln abs-center”></div>
<!– den minsta cirkeln –>
<div class=”core-inre cirkeln abs-center”></div>
</div>
</div>

De element som anges i koden som visas ovan på skärmen. Om vi sätter core-yttre nedan kärnan-inre i koden, då core-inre kommer inte att vara synliga, eftersom core-yttre kommer att täcka det.

Låt oss ge stil till yttre-kod. Den yttre kärnan kommer vara lite större än den inre kärnan och vi kommer att ge en yttre och inre glöd att core-yttre också:

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

Jag vill att du ska göra en sak: att titta på skuggorna (glöd) och försöka identifiera vilken som är vilken cirkel. Det finns fyra skuggor och två cirklar (tills nu).

Till slut utforma kärnan, vi kommer att behöva ytterligare en cirkel som kommer att avsluta den inre och yttre cirklar:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<!– den tredje cirkeln –>
<div class=”core-wrapper cirkel abs-center”></div>
<!– den andra cirkeln –>
<div class=”core-yttre cirkeln abs-center”></div>
<!– den minsta cirkeln –>
<div class=”core-inre cirkeln abs-center”></div>
</div>
</div>

Detta kommer att vara en lite större, och kommer återigen att ha samma skuggor, vi kommer att använda en mörk bakgrund för core-wrapper:

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

Skapa Reaktorn Spolar och Rotera med CSS3 Förvandlar

Vi har kärnan i reaktorn, nu behöver vi en tunnel runt kärnan. Vi kan faktiskt skapa en illusion av en rund tunnel genom att rita en cirkel som var lite större än kärnan-omslag. Låt oss göra det:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<!– den största cirkeln –>
<div class=”tunnel cirkel abs-center”></div>
<!– den tredje cirkeln –>
<div class=”core-wrapper cirkel abs-center”></div>
<!– den andra cirkeln –>
<div class=”core-yttre cirkeln abs-center”></div>
<!– den minsta cirkeln –>
<div class=”core-inre cirkeln abs-center”></div>
</div>
</div>

…en lite bredare och lägga till samma glöd till tunneln:

.tunneln {
bredd: 220px;
höjd: 220px;
background-color: #fff;
box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe infälld;
}

Vår tunnel är klar.

Se till att du inte bara kopiera och klistra in koden. Ta en titt på de lyser av cirklar och identifiera vilken glöd är som cirkel, oavsett om det är utanför glöd eller infälld glöd.

Nu behöver vi åtta ringar eller rullar på den här tunneln. Spolarna är enkla rektanglar, men den stora utmaningen är att vi behöver spolar för att köra längs den runda vägen i tunnel, och inte i rak linje.

Ett sätt att göra detta skulle vara att skapa åtta små rektanglar, flytta sin centrum till centrum av reaktorn, och rotera varje spole av en ökande vinkel (i multiplar av 45deg).

Låt oss inte krångla till det och göra en rektangel spole på en gång:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<div class=”tunnel cirkel abs-center”></div>
<div class=”core-wrapper cirkel abs-center”></div>
<div class=”core-yttre cirkeln abs-center”></div>
<div class=”core-inre cirkeln abs-center”></div>
<div class=”coil-1″></div>
</div>
</div>
.coil-1 {
position: absolute;
bredd: 30px;
höjd: 26px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe infälld;
}

Nu vill vi placera denna spole i mitten på toppen av tunneln. Så här:

Vår reaktor-behållare 300px x 300px, så att mitten är på 150px från toppen och vänster. Tunneln är 220px bred, så att dess radie kommer att bli 110px. Detta ger oss toppen kompenseras av spole: 150px – 110px.

Vi kan hålla till vänster på spolen till 150px, men eftersom vår spole är 30px brett, det kommer att flytta mitten av spolen genom att 15px till höger, det är därför vi måste subtrahera 15px från 150px att få offset vänster på spolen.

Antingen kan vi beräkna dessa för oss själva och sätter värde, eller vi kan använda CSS-calc () – funktionen. Låt oss använda CSS-calc() funktion för att beräkna övre och vänstra egenskaper på spolen:

.coil-1 {
position: absolute;
bredd: 30px;
height: 20px;
topp: calc(50% – 110px);
vänster: calc(50% – 15 px);
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe infälld;
}

Som du kan se, calc() funktionen tar ett matematiskt uttryck som argument och löser det.

Nu behöver vi åtta sådana ringar men de måste ligga på tunneln. För att göra det, diskuterade, vi kan helt enkelt placera åtta ringar på samma ställe, sedan omvandla sitt ursprung till mitten av reaktorn, och rotera varje spole med en ökning på 45 grader.

Vi behöver uppdatera spole ursprung eftersom som standard är det är satt till mitten av spole; vi vill att det vid mitten av reaktorn:

Vi kommer att använda förvandla-ursprung, egendom att fastställa ursprunget för spolen:

.coil-1 {
position: absolute;
bredd: 30px;
height: 20px;
topp: calc(50% – 110px);
vänster: calc(50% – 15 px);
förvandla-ursprung: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe infälld;
}

Det första värdet, 15px, i omvandla-ursprung är x-offset (horisontellt avstånd) från det övre vänstra hörnet av elementet, och det andra värdet, 110px, är y-offset (vertikala avståndet från övre vänstra hörnet av elementet.

Spolen ursprung är nu i mitten av reaktorn, låt oss rotera den med 45 grader med hjälp av CSS3 omvandla fastigheten och se vad som händer:

.coil-1 {
position: absolute;
bredd: 30px;
height: 20px;
topp: calc(50% – 110px);
vänster: calc(50% – 15 px);
förvandla-ursprung: 15px 110px;
förändra: rotera(45deg);
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe infälld;
}

Bra! Det är precis vad vi vill.

Innan du skapar alla de åtta ringar, låt oss skapa en spole div container som kommer att innehålla alla de åtta ringar eller rullar:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<div class=”tunnel cirkel abs-center”></div>
<div class=”core-wrapper cirkel abs-center”></div>
<div class=”core-yttre cirkeln abs-center”></div>
<div class=”core-inre cirkeln abs-center”></div>
<!– spolen container –>
<div class=”coil-container”>
<div class=”spole spole-1″></div>
</div>
</div>
</div>

Du kommer att märka har vi även lagt till en klass “coil” till “coil-1” element. Vi kommer att hålla alla de vanliga stilar för spolar i “coil” klass, och de enskilda spole del klasser bara deras vridningsvinkel:

.coil-container {
position: relative;
width: 100%;
höjd: 100%;
}

.spole {
position: absolute;
bredd: 30px;
height: 20px;
topp: calc(50% – 110px);
vänster: calc(50% – 15 px);
förvandla-ursprung: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe infälld;
}

.coil-1 {
förändra: rotera(45deg);
}

Produktionen kommer att förbli densamma.

Nu, låt oss göra alla de åtta ringar på insidan .coil-behållare:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<div class=”tunnel cirkel abs-center”></div>
<div class=”core-wrapper cirkel abs-center”></div>
<div class=”core-yttre cirkeln abs-center”></div>
<div class=”core-inre cirkeln abs-center”></div>
<!– spolen container –>
<div class=”coil-container”>
<div class=”spole spole-1″></div>
<div class=”spole spole-2″></div>
<div class=”spole spole-3″></div>
<div class=”spole spole-4″></div>
<div class=”spole spole-5″></div>
<div class=”spole spole-6″></div>
<div class=”spole spole-7″></div>
<div class=”spole spole-8″></div>
</div>
</div>
</div>

…och ge olika rotationer på alla spolar (i steg om 45 grader):

.spole {
position: absolute;
bredd: 30px;
height: 20px;
topp: calc(50% – 110px);
vänster: calc(50% – 15 px);
förvandla-ursprung: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe infälld;
}

.coil-1 {
förändra: rotera(0deg);
}

.coil-2 {
förändra: rotera(45deg);
}

.coil-3 {
förändra: rotera(90deg);
}

.coil-4 {
förändra: rotera(135deg);
}

.coil-5 {
förändra: rotera(180deg);
}

.coil-6 {
förändra: rotera(225deg);
}

.coil-7 {
förändra: rotera(270deg);
}

.coil-8 {
förändra: rotera(315deg);
}

Våra reaktorn är nästan klar.

Animera Spolar Med CSS3 Animationer

I Iron Man ‘ s Arc reaktor, den spolar inte flytta, men de kommer i vår reaktorn. Vi kommer att animera spolar för att rotera längs tunneln och kommer använda CSS3 animationer för detta—inget JavaScript.

För att skapa en animation, du behöver att veta den första och sista medlemsstaterna av de objekt som du kommer att animera. Vi definierar dessa första och sista länderna i CSS med hjälp av @keyframes i-regeln:

@keyframes reaktor-anim {
från {
förändra: rotera(0deg);
}
till {
förändra: rotera(360deg);
}
}

Vi vill att elementet ska vara på 0 grader och animera den tills den når 360 grader. Och vi heter denna animation som “reaktor-anim.”

Den delen som vi vill animera .coil-contailer. Märker vi inte definiera vilka objekt som ska animeras ännu, vi har bara definierat den första och den slutliga tillstånd och namn av animation.

Vi måste koppla element-animation för att ta effekt. Vi gör det med hjälp av animation-namn<code> fastighet <kod>.coil-behållare:

.coil-container {
position: relative;
width: 100%;
höjd: 100%;
animation-namn: reactor-anim;
animation-längd: 3s;
}

Meddelande, vi gav också varaktigheten av animering med hjälp av animation-längd egendom. Detta anger hur mycket tid det ska ta att gå från “från” staten “till” staten definieras med @keyframes i-regeln.

Se Pennan Arc-Reaktor-Lätthet-av Kunal Sarkar (@supersarkar) på CodePen.

Vi måste ändra på två saker här: vi vill att animeringen ska gå på oändligt och vi vill ha en linjär animation. Du kan se animeringen är långsam i början, sedan snabbt, sedan igen långsamt på slutet—detta beteende definieras av tidpunkten funktion av en animering.

Låt oss göra dessa ändringar:

.coil-container {
position: relative;
width: 100%;
höjd: 100%;
animation-namn: reactor-anim;
animation-längd: 3s;
animation-iteration-count: oändlig;
animation-timing-funktion: linjär;
}

Vi använde animation-iteration-räkna egenskapen att ställa animation till oändlig, och animation-timing-funktion för att göra animationen linjär, det förvalda värdet av animation-timing-funktionen är enkel.

Se Pennan Arc-Reaktor-Linjär-Oändligt med Kunal Sarkar (@supersarkar) på CodePen.

Vi kan kombinera alla dessa animation egenskaper…

animation-namn: reactor-anim;
animation-längd: 3s;
animation-iteration-count: oändlig;
animation-timing-funktion: linjär;

…till en förkortning fastighet så här:

animation: 3s oändliga linjär reaktor-anim;

Sista Touchen till Reaktorn Behållare

Våra reaktorn är redo, låt oss nu göra några sista ändringar .reaktor-behållaren. För det första, vi kommer att behöva en mörk cirkel bakom reaktorn:

<div class=”helsida-wrapper”>
<div class=”reaktor-container”>
<!– mörk cirkel bakom reaktorn –>
<div class=”reaktor-container-inre cirkeln abs-center”></div>
<div class=”tunnel cirkel abs-center”></div>
<div class=”core-wrapper cirkel abs-center”></div>
<div class=”core-yttre cirkeln abs-center”></div>
<div class=”core-inre cirkeln abs-center”></div>
<div class=”coil-container”>
<div class=”spole spole-1″></div>
<div class=”spole spole-2″></div>
<div class=”spole spole-3″></div>
<div class=”spole spole-4″></div>
<div class=”spole spole-5″></div>
<div class=”spole spole-6″></div>
<div class=”spole spole-7″></div>
<div class=”spole spole-8″></div>
</div>
</div>
</div>

Låt oss ge en mörk bakgrund och lägga till lite glöd:

.reaktor-container-inre {
höjd: 238px;
bredd: 238px;
background-color: rgb(22, 26, 27);;
box-shadow: 0px 0px 4px 1px #52fefe;
}

Se Pennan Arc-Reaktor-Semi-Final med Kunal Sarkar (@supersarkar) på CodePen.

Se hur den mörka bakgrunden och glöd skapar en relief-effekt?

Nästa, låt oss göra det .rotator-behållare runt och ge det lite skugga och på gränsen, då har vi gjort:

.reaktor-container {
width: 300px;
height: 300px;
margin: auto;
border: 1px streckade #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) infälld;
}

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

Skål! Våra Arc Reaktorn är klar och även med en liten animation som en extra bonus. Till nivå upp detta, vi kan utforska med hjälp av anpassade egenskaper för att skapa återanvändbara variabler för vår färg och antal värden för enklare underhåll. På samma sätt, vi kunde titta på med hjälp av en preprocessor—som Sass, Mindre eller PostCSS—att skriva funktioner som gör den matematiska lyft för oss. Skulle älska att se sådana exempel i kommentarerna!