Nakladalniki enega elementa: pike

Gledamo nakladalce v tej seriji. Poleg tega razčlenjujemo nekaj običajnih vzorcev nalagalnika in kako jih znova ustvariti z nič več kot z enim divom. Zaenkrat sva se ločila klasični vrtljivi nakladalnik. Zdaj pa poglejmo še enega, ki ga verjetno dobro poznate: pike.

Točkovni nakladalniki so povsod. Lepe so, ker so običajno sestavljene iz treh pik, ki so videti kot tri črke besedila (…), ki plešejo naokoli.

Naš cilj tukaj je narediti isto stvar iz enega samega elementa div. Z drugimi besedami, ni enega diva na piko ali posamezne animacije za vsako piko.

Zgornji primer nalagalnika je narejen z enim samim elementom div, nekaj deklaracijami CSS in brez psevdoelementov. Z uporabo CSS kombiniram dve tehniki background in mask. In ko končamo, bomo videli, kako animiranje preliva ozadja pomaga ustvariti iluzijo, da vsaka pika spreminja barvo, ko se zaporedoma premika gor in dol.

Animacija v ozadju

Začnimo z animacijo v ozadju:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Upam, da je to videti precej preprosto. Kar imamo, je a 180pxna splošno .loader element, ki prikazuje dva stožčasta preliva s trdimi barvnimi postanki med dvema barvama – prvi preliv je rdeč in moder vzdolž zgornje polovice .loader, drugi preliv pa je zelen in vijoličen vzdolž spodnje polovice.

Način velikosti ozadja nalagalnika (200% široko), vidimo samo eno od teh barv v vsaki polovici naenkrat. Potem imamo to majhno animacijo, ki premika položaj teh prelivov ozadja levo, desno in nazaj za vedno in za vedno.

Pri obravnavanju lastnosti ozadja - še posebej background-position — Vedno se sklicujem na svoje Odgovor Stack Overflow, kjer podajam podrobno razlago o tem, kako vse to deluje. Če vam je neprijetno z zvijačami v ozadju CSS, toplo priporočam, da preberete ta odgovor, da vam pomaga pri tem, kaj sledi.

V animaciji opazite, da je prva plast Y=0% (na vrhu) medtem ko X je spremembe od 0% do 100%. Za drugo plast imamo enako za X vendar Y=100% (postavljeno na dno).

Zakaj uporabljati a conic-gradient() Namesto linear-gradient()?

Dobro vprašanje! Intuitivno bi morali uporabiti linearni gradient za ustvarjanje dvobarvnih gradientov, kot je ta:

linear-gradient(90deg, red 50%, blue 0)

Vendar lahko isto dosežemo tudi z uporabo a conic-gradient() — in z manj kode. Zmanjšamo kodo in se pri tem naučimo novega trika!

Drsenje barv levo in desno je lep način, da je videti, kot da spreminjamo barve, vendar bi bilo morda bolje, če namesto tega takoj spremenimo barve – tako ni možnosti, da bi pika nalagalnika utripala dve barvi hkrati . Če želite to narediti, spremenimo animationčasovna funkcija od linear do steps(1)

Nalagalnik pike

Če ste sledili skupaj z prvi članek v tej seriji, stavim, da veste, kaj sledi: CSS maske! Kar dela maske tako odlične, je to, da nam nekako dovolijo “izrezane” dele ozadja v obliki drugega elementa. Torej, v tem primeru želimo narediti nekaj pik, prikazati prelive ozadja skozi pike in izrezati vse dele ozadja, ki niso del pike.

Uporabili bomo radial-gradient() za to:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Tam je nekaj podvojene kode, zato naredimo spremenljivko CSS, da zmanjšamo stvari:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Kul kul. Zdaj pa potrebujemo novo animacijo, ki pomaga premikati pike gor in dol med animiranimi prelivi.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Da, to so skupaj trije radialni prelivi, vsi z enako konfiguracijo in enako velikostjo — animacija bo posodobila položaj vsakega od njih. Upoštevajte, da je X koordinata vsake pike je fiksna. The mask-position definiran tako, da je prva pika na levi (0%), drugi na sredini (50%), tretji pa desno (100%). Posodabljamo samo Y koordiniraj od 0% do 100% da pike zaplešejo.

Evo, kaj dobimo:

Zdaj pa združite to z našo gradientno animacijo in čarovnija se bo začela dogajati:

Različice nalagalnika točk

Spremenljivka CSS, ki smo jo naredili v zadnjem primeru, olajša zamenjavo novih barv in ustvarjanje več različic istega nalagalnika. Na primer, različne barve in velikosti:

Kaj pa drugo gibanje za naše pike?

Tukaj sem samo posodobil animacijo, da je upošteval različne položaje, in dobili smo še en nalagalnik z isto strukturo kode!

Tehniko animacije, ki sem jo uporabil za sloje maske, lahko uporabim tudi s sloji ozadja, da ustvarim veliko različnih nalagalnikov z eno barvo. O tem sem napisal podroben članek. Videli boste, da lahko iz iste strukture kode ustvarimo različne različice s preprosto spremembo nekaj vrednosti. Na koncu članka delim nekaj primerov.

Zakaj ne nakladalka z eno piko?

To bi moralo biti dokaj enostavno za grok, saj uporabljam isto tehniko, vendar z bolj preprosto logiko:

Tukaj je še en primer nakladalnika, kjer prav tako animiram radial-gradient v kombinaciji z CSS filtri in mix-blend-mode ustvarite učinek madežev:

Če preverite kodo, boste videli, da je vse, kar tam dejansko počnem, animiranje background-position, natanko tako kot pri prejšnjem nalagalniku, le da smo dodali pomišljaj background-size da bo videti, kot da madež postaja večji, ko absorbira pike.

Če želite razumeti čarovnijo za tem učinkom madežev, se lahko obrnete na ti interaktivni diapozitivi (samo Chrome) avtor Ana Tudor ker tako dobro pokriva temo!

Tukaj je še ena ideja za nalaganje pik, tokrat z uporabo drugačne tehnike:

Ta vsebuje samo 10 deklaracij CSS in ključni okvir. Glavni element in njegova dva psevdoelementa imajo enako konfiguracijo ozadja z enim radialnim gradientom. Vsak ustvari eno piko, skupaj tri. Animacija premika gradient od zgoraj navzdol z uporabo različnih zakasnitev za vsako piko.

Oh, in upoštevajte, kako ta predstavitev uporablja CSS Grid. To nam omogoča, da izkoristimo privzeto omrežje stretch poravnavo, tako da oba psevdoelementa pokrivata celotno območje svojega starša. Dimenzioniranje ni potrebno! Malo potisnite okoli s translate() in vse je pripravljeno.

Več primerov!

Da povem bistvo, vam želim pustiti kopico dodatnih primerov, ki so v resnici različice tega, kar smo si ogledali. Ko si boste ogledali predstavitve, boste videli, da so pristopi, ki smo jih obravnavali tukaj, izjemno prilagodljivi in ​​odpirajo ogromno možnosti oblikovanja.

Naslednje ...

V redu, v tem članku smo obravnavali nalagalnike točk, v zadnjem pa vrtilne naprave. V naslednjem članku te štiridelne serije bomo pozornost usmerili na še en pogost tip nakladalnika: palice. Vzeli bomo veliko tega, kar smo se doslej naučili, in videli, kako jih lahko razširimo, da ustvarimo še en nalagalnik enega elementa s čim manj kode in čim večjo prilagodljivostjo.

---

Nakladalniki enega elementa: pike prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Source: https://css-tricks.com/single-element-loaders-the-dots/