Egyelemes rakodók: The Dots

Ebben a sorozatban a rakodókat nézzük. Ezen túlmenően néhány gyakori betöltő mintát bontunk le, és hogyan hozhatjuk újra őket egyetlen div segítségével. Eddig külön választottunk a klasszikus forgó rakodó. Most pedig nézzünk meg egy másikat, amivel valószínűleg jól is tudsz: a pontokat.

A pontbetöltők mindenhol vannak. Szépek, mert általában három pontból állnak, amelyek úgy néznek ki, mint egy szöveges ellipszis (…), amely körbe táncol.

Itt az a célunk, hogy ugyanazt a dolgot egyetlen div elemből készítsük el. Más szóval, nincs egyetlen div pontonként vagy külön animáció minden ponthoz.

A fenti betöltő példája egyetlen div elemmel, néhány CSS-deklarációval készült, pszeudoelemek nélkül. Két technikát kombinálok CSS használatával background és a mask. És ha végeztünk, meglátjuk, hogyan segít a háttérszínátmenet animálása azt az illúziót kelteni, hogy minden pont színt vált, ahogy egymás után fel-le mozognak.

A háttér animáció

Kezdjük a háttér animációval:

.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%; }
}

Remélem, ez elég egyértelműnek tűnik. Amink van, az a 180px-széles .loader olyan elem, amely két kúpos színátmenetet mutat kemény színekkel, két-két szín között megáll – az első színátmenet piros és kék a kép felső felében. .loader, a második színátmenet pedig zöld és lila az alsó fele mentén.

A betöltő hátterének mérete (200% széles), egyszerre csak egy-egy színt látunk mindkét félben. Aztán van ez a kis animáció, amely a háttérszínátmeneteket balra, jobbra és vissza tolja örökkön-örökké.

Amikor a háttértulajdonságokkal foglalkozunk – különösen background-position – Mindig az enyémre hivatkozom Stack Overflow válasz, ahol részletes magyarázatot adok hogy mindez hogyan működik. Ha kényelmetlenül érzi magát a CSS-háttérrel kapcsolatos trükkök miatt, erősen javaslom, hogy olvassa el ezt a választ, hogy segítsen a következő lépésekben.

Az animációban figyelje meg, hogy az első réteg az Y=0% (legfelül helyezve) míg X -től változik 0% nak nek 100%. A második réteghez ugyanez van X de Y=100% (alul van elhelyezve).

Miért használja a conic-gradient() helyett linear-gradient()?

Jó kérdés! Intuitív módon lineáris színátmenetet kell használnunk az ehhez hasonló kétszínű színátmenetek létrehozásához:

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

De elérhetjük ugyanezt a segítségével is conic-gradient() - és kevesebb kóddal. Csökkentjük a kódot, és közben megtanulunk egy új trükköt is!

A színek balra és jobbra csúsztatásával úgy tűnhet, mintha színt váltanánk, de lehet, hogy jobb lenne, ha azonnal színeket váltanánk – így nincs esély arra, hogy egy betöltőpont egyszerre két színt villogjon. . Ehhez változtassuk meg a animationidőzítési funkciója innen linear nak nek steps(1)

A betöltő pontok

Ha követte együtt a első cikk ebben a sorozatban, Lefogadom, tudod, mi következik: CSS maszkok! Amitől a maszkok olyan nagyszerűek, az az, hogy engedik nekünk „kivágja” a háttér részeit egy másik elem alakjában. Tehát ebben az esetben szeretnénk néhány pontot készíteni, a pontokon keresztül megjeleníteni a háttér színátmeneteit, és kivágni a háttér minden olyan részét, amely nem része egy pontnak.

Használni fogjuk radial-gradient() ezért:

.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 */
}

Van benne néhány duplikált kód, ezért hozzunk létre egy CSS-változót, hogy csökkentsük a dolgokat:

.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%;
}

Cool cool. De most szükségünk van egy új animációra, amely segít a pontok fel-le mozgatására az animált színátmenetek között.

.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 */
}

Igen, ez összesen három sugárirányú gradiens van benne, mindegyik ugyanolyan konfigurációval és mérettel – az animáció frissíti mindegyik helyzetét. Vegye figyelembe, hogy a X minden pont koordinátája rögzített. A mask-position úgy van megadva, hogy az első pont a bal oldalon legyen (0%), a második középen (50%), a harmadik pedig jobbra (100%). Csak frissítjük a Y koordináta innen 0% nak nek 100% hogy táncoljanak a pöttyök.

Íme, amit kapunk:

Most kombinálja ezt a színátmenetes animációnkkal, és elkezdődik a varázslat:

Dot loader variációk

Az előző példában elkészített CSS-változó sokkal könnyebbé teszi az új színek felcserélését, és ugyanannak a betöltőnek több változatának létrehozását. Például különböző színek és méretek:

Mi a helyzet egy másik mozgással a pontjaink számára?

Itt csak annyit tettem, hogy frissítettem az animációt, hogy figyelembe vegye a különböző pozíciókat, és kapunk egy másik betöltőt ugyanazzal a kódszerkezettel!

A maszkrétegekhez használt animációs technikát a háttérrétegekkel is lehet használni, hogy sok különböző betöltőt készítsünk egyetlen színnel. Erről írtam egy részletes cikket. Látni fogja, hogy ugyanabból a kódstruktúrából különböző variációkat hozhatunk létre néhány érték egyszerű megváltoztatásával. A cikk végén megosztok néhány példát.

Miért nem egy rakodó egy ponttal?

Ezt elég könnyűnek kell lennie, mivel ugyanazt a technikát használom, de egyszerűbb logikával:

Itt van egy másik példa a betöltőre, ahol szintén animálok radial-gradient együtt CSS szűrők és a mix-blend-mode foltos hatás létrehozásához:

Ha ellenőrzi a kódot, látni fogja, hogy valójában csak animálom background-position, pontosan úgy, mint az előző betöltővel, de hozzáadunk egy kötőjelet background-size hogy úgy tűnjön, a folt nagyobb lesz, ahogy elnyeli a pontokat.

Ha meg szeretné érteni a blob-effektus mögött rejlő varázslatot, hivatkozzon rá ezek az interaktív diák (csak Chrome) által Ana Tudor mert olyan jól fedi a témát!

Íme egy másik pontbetöltő ötlet, ezúttal más technikával:

Ez csak 10 CSS-deklaráció és egy kulcskeret. A fő elem és két pszeudoeleme azonos háttérkonfigurációval rendelkezik, egyetlen radiális gradienssel. Mindegyik egy pontot hoz létre, összesen hármat. Az animáció felülről lefelé mozgatja a színátmenetet az egyes pontokhoz különböző késleltetésekkel.

Ó, és vegye figyelembe, hogy ez a demó hogyan használja a CSS Grid-et. Ez lehetővé teszi számunkra, hogy kihasználjuk a rács alapértelmezett értékét stretch igazítást úgy, hogy mindkét pszeudoelem lefedje szülőjének teljes területét. Méretezés nem szükséges! Nyomja meg egy kicsit a kört translate() és készen is vagyunk.

Még több példa!

Csak hogy a lényeget hazavigyük, egy csomó további példát szeretnék meghagyni, amelyek valóban változatai annak, amit megnéztünk. A demók megtekintése közben látni fogja, hogy az itt ismertetett megközelítések rendkívül rugalmasak, és rengeteg tervezési lehetőséget nyitnak meg.

Következö…

Rendben, szóval ebben a cikkben a pontbetöltőkkel, az utolsóban pedig a pörgettyűkkel foglalkoztunk. A négyrészes sorozat következő cikkében egy másik gyakori rakodótípusra irányítjuk figyelmünket: a rácsokat. Sok mindent át fogunk venni az eddig tanultakból, és meglátjuk, hogyan bővíthetjük ki őket egy újabb egyelemes betöltő létrehozásához, a lehető legkevesebb kóddal és a lehető legnagyobb rugalmassággal.

---

Egyelemes rakodók: The Dots eredetileg megjelent CSS-trükkök. Neked kellene kapja meg a hírlevelet.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://css-tricks.com/single-element-loaders-the-dots/