Kā izveidot Reddit iedvesmotu iekrāvēju ar tikai HTML un CSS

Reddit mobilajā lietotnē ir diezgan pārsteidzošs ielādes vērpējs, kas atgādina orbītas ķermeņus, kas riņķo ap planētu vai zvaigzni. Lielākā daļa izstrādātāju meklētu JavaScript vai SVG šādam uzdevumam, taču, pateicotiesanimation-iteration-count: infinite;un daži citi hacki un triki, tas pat nav vajadzīgs. Šodien es jums parādīšu, kā kodēt Reddit iedvesmotu vērpēju tikai HTML un CSS!

Lūk, galīgais rezultāts:

Pamata iestatīšana

Sāksim, uzrakstot dažus HTML DOM elementus, uz kuriem mēs varam piestiprināt centrālo apli un katru no rotējošajām orbitālēm.

 ... ... 

Šie elementi inner-spinun outer-spinelementi būs visu galveno animācijas mezgli, un galu galā šiem vecāku mezgliem mēs piemērosim CSS atslēgu kadru pārveidojumus.

Iepriekš redzamajā koda piemērā elipses ( ) stāv lokos un riņķo ap “pavadoņiem”. Gan iekšējā, gan ārējā gredzenā katrā ir divi loki un divi pavadoņi, taču tādu iemeslu dēļ, kas kļūs skaidrāki mazliet vēlāk, katru loku faktiski veido divas CSS formas, tāpēc mums kopumā vajag astoņus lokus un četrus pavadoņus. HTML pilnībā izskatās šādi:

CSS formas

CSS ir iespējams uzzīmēt apļus un lokus, vienkārši izveidojot kvadrātu un iestatot border-radius50%.

Katrai apmales pusei var būt atšķirīga krāsa vai to var iestatīt uz transparent. background-colorĪpašums nosaka formu aizpildījuma, ja tādi ir.

90, 180 un 270 grādu lokus ir viegli uzzīmēt, vienkārši iestatot vienu vai vairākas robežas puses caurspīdīgām. Tomēr, ja uzmanīgi aplūkojat vērpēju lapas augšdaļā, pamanīsit, ka katras orbitāles “aste” aiz sevis atstāj atstarpi starp sevi un mēnesi. Tas nozīmē, ka, lai arī loka garumi ir tuvu 180 grādiem, viņi nedaudz kautrējas no 180.

Lai CSS uzzīmētu neregulāra garuma apļa segmentus, ir nepieciešams nedaudz uzlauzt. Lai to izdarītu, mums jāzīmē divi blakus esošie 90 grādu loka segmenti un nedaudz jāpagriež viens, lai tie pārklājas, atstājot šķietamo loka segmentu apmēram 160 grādos.

Tagad, skatoties atpakaļ uz HTML, tagad jūs varētu uzminēt, kāpēc katram lokam esam iestatījuši divus mezglus (an arc_startun arc_end). Tie tiks izmantoti, lai attēlotu vienas loka, kas pārklājas, katru daļu, kas apzīmē katras orbitāles asti.

CSS iestatīšana

Vispirms mēs iestatīsim CSS mainīgo, kas apzīmē vērpēja krāsu, un citu mainīgo, kas atspoguļo -50%, -50% tulkojumu, ko mēs izmantosim visā CSS, lai centrētu formas ap viņu centru (kā norādīts to augšējā kreisajā stūrī, kas ir noklusējums).

html { --spinner: #1EAAF0; --center: translate(-50%, -50%); }

Tagad mēs varam iet uz priekšu un uzzīmēt arī centrālo apli.

.center { position: absolute; width: 30px; height: 30px; background: var(--spinner); border-radius: 50%; top: 50%; left: 50%; transform: var(--center); }

Bērna mezgli katrai orbitālei ir ieslēgti vecāku mezglos, kurus sauc inner-spinun outer-spin. Pagaidām mēs tos vienkārši izmantosim, lai vērpēju centrētu logā.

.outer-spin, .inner-spin { position: absolute; top: 50%; left: 50%; }

Orbitalu zīmēšana

Iekraušanas vērpējs būtībā ir koncentrisku apļu virkne, tāpēc vispirms pievērsīsimies tikai vienas loka uzzīmēšanai.

Tā kā katra loka sastāv no divām daļām, kas pārklājas, sākam tikai zīmēt divus lokus, kas atrodas viens otram blakus.

.inner-arc { width: 62px; height: 62px; } .inner-arc_start-a { border-color: transparent transparent transparent green; /* NOTE: the order here very much matters! */ transform: var(--center) rotate(0deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(0deg); }

Pirmais pārveidojums centrē logu. Rotācija ir iestatīta uz nulles grādiem, lai parādītu loku noklusējuma stāvokli.

Ievērojiet, ka loki nesakrīt ar vienības apļa x krustojumiem. Lai to labotu un lai lokus būtu vieglāk strādāt, mēs tos pagriežam par 45 grādiem. Tad mēs nedaudz pagriežam vienu no lokiem, lai izveidotu kopējo loka garumu apmēram 160 grādi.

.inner-arc_start-a { border-color: transparent transparent transparent green; transform: var(--center) rotate(65deg); } .inner-arc_end-a { border-color: red transparent transparent transparent; transform: var(--center) rotate(45deg); }

Tālāk mēs varam novietot vienu no orbītas pavadoņiem, pārvietojot to pa x asi. Diemžēl atšķirībā no vektorgrafikas, piemēram, SVG, CSS robežas nav bez platuma vektori, kas pieņem insulta stilu. Tas nozīmē, ka attālumi netiek automātiski mērīti līdz līnijas centrālajam punktam. Novietojot objektus, mums jāņem vērā apmales platums.

Tā rezultātā rodas daži “maģiskie skaitļi”, kurus mēs, iespējams, varētu samazināt, ja vēlētos iestatīt vairāk CSS mainīgo un izmantot calc()funkciju. Tas, šķiet, ir mazliet iesaistīts, tāpēc pagaidām es tikai pozicionēšu apli pēc pikseļu vērtības.

.inner-moon-a { position: absolute; top:50%; left:50%; width: 12px; height: 12px; background: red; border-radius: 50%; transform: var(--center) translate(33px, 0); }

Tālāk mēs uzzīmējam vēl divus lokus, bet šoreiz mēs izmantojam scale(-1, -1)transformāciju. Tas paver lokus gan x, gan y asīs, būtībā atspoguļojot kontrailu.

.inner-arc_start-b { border-color: transparent transparent transparent var(--spinner); transform: var(--center) rotate(65deg) scale(-1, -1); } .inner-arc_end-b { border-color: var(--spinner) transparent transparent transparent; transform: var(--center) rotate(45deg) scale(-1, -1);

Visbeidzot, attiecībā uz ārējo orbītu mēs vienkārši atkārtojam CSS no iekšējās orbītas, bet iestatām lielāku augstumu un platumu! (Iedomājieties, cik īsa šī CSS varētu būt ar SASS mikseriem!)

.outer-arc { width: 100px; height: 100px; }

Animācijas pievienošana

Pēdējais solis ir pievienot animāciju. Vispirms mums jāpievieno viens atslēgkadru elements, kas nosaka animācijas uzvedības veidu un CSS elementu (-us), ko veic animācija, šajā gadījumā pagriešana caur transformīpašumu.

@keyframes spin { 100% {transform: rotate(360deg); } }

Identifikators “ spin” savieno atslēgkadrus ar animācijas atribūtiem, kurus mēs pievienosim katram vecākajam elementam. Animācijas rekvizīts nosaka animācijas laika informāciju, kas nozīmē, ka katra orbitāle riņķos ar atšķirīgu ātrumu.

.outer-spin { animation: spin 4s linear infinite; } .inner-spin { animation: spin 3s linear infinite; }

Tieši tā!

Šīs apmācības kodu var atrast vietnē CodePen.io. Lūdzu, komentējiet - vai čivināt pie manis @PleathrStarfish - ja jums ir ieteikums, novērojums vai forša mana koda dakša!