Single Element Loaders: Going 3D!

Ehhez a negyedik és egyben utolsó cikkünkhöz kis sorozatok az egyelemes rakodókon, 3D-s mintákat fogunk felfedezni. 3D-elemek létrehozásakor nehéz elképzelni, hogy egyetlen HTML-elem elég ahhoz, hogy egy kocka mind a hat oldalát szimulálja. De talán megúszhatjuk valami több kockával...mint ehelyett csak az alakzat elülső három oldalát jelenítjük meg – ez teljesen lehetséges, és ezt fogjuk együtt csinálni.

Az osztott kocka betöltő

Itt van egy 3D betöltő, ahol egy kocka két részre van osztva, de csak egyetlen elemből készül:

A kocka minden fele pszeudoelemből készül:

Menő, igaz?! Használhatunk kúpos gradienst a CSS-szel clip-path az elemen ::before és a ::after pszeudók egy 3D kocka három látható lapjának szimulálásához. A negatív margó az, ami összehúzza a két pszeudót, hogy átfedjék egymást, és egy teljes kockát szimuláljanak. Munkánk többi része többnyire e két fél animálása, hogy csinos rakodókat kapjunk!

Nézzünk meg egy vizualitást, amely elmagyarázza a kockaszerű elem létrehozásához használt klip-útvonal-pontok mögötti matematikát:

Megvannak a változóink és egy egyenletünk, tehát tegyük őket működésbe. Először is létrehozzuk a változóinkat, és beállítjuk a fő méretét .loader elem:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Eddig semmi őrült. Nekünk van 150px négyzet, amely rugalmas tárolóként van beállítva. Most létrehozzuk a pszeudóinkat:

.loader::before,
.loader::after { content: ""; flex: 1;
}

Ez két fél a .loader tartály. Be kell festenünk őket, szóval ez a miénk kúpos gradiens beüt:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

A gradiens megvan, de furán néz ki. Meg kell tennünk rögzítse az elemhez:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Győződjön meg arról, hogy a két fele átfedi a-val negatív árrés:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Most mozgassuk meg őket!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Ismét itt az utolsó demó:

A haladás kocka betöltő

Használjuk ugyanezt a technikát egy 3D-s folyamatbetöltő létrehozásához. Igen, még mindig csak egy elem!

Semmin nem változtatunk, ha a kockát ugyanúgy szimuláljuk, mint korábban, kivéve a rakodó magasságának és képarányának megváltoztatását. Az általunk készített animáció egy meglepően egyszerű technikán alapul, ahol a bal oldal szélességét frissítjük, míg a jobb oldal kitölti a maradék helyet, köszönhetően flex-grow: 1.

Az első lépés a jobb oldali átlátszóság növelése opacity:

Ez azt a hatást szimulálja, hogy a kocka egyik oldala ki van töltve, míg a másik üres. Ezután frissítjük a bal oldal színét. Ehhez vagy frissítjük a három színt a kúpos színátmeneten belül, vagy egy háttérszín hozzáadásával egy background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

Ez a trükk csak egyszer teszi lehetővé a szín frissítését. A rakodó jobb oldala összeolvad a fehér három árnyalatával a kúpos gradiensből, így három új árnyalat jön létre a színünkből, bár csak egy színértéket használunk. Színes trükk!

Animáljuk a rakodó bal oldalának szélességét:

Hoppá, az animáció az elején kicsit furcsa! Észreveszi, hogyan kezdődik a kockán kívül? Ennek az az oka, hogy az animációt a 0% szélesség. De mivel a clip-path és negatív árrést használunk, ehelyett a sajátunkból kell kiindulnunk --_d változót, amellyel meghatároztuk a clip-path pontok és a negatív árrés:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

Ez egy kicsit jobb:

De ezt az animációt még gördülékenyebbé tehetjük. Észrevetted, hogy hiányzik valami? Hadd mutassak egy képernyőképet, hogy összehasonlítsam, hogyan nézzen ki a végső demó az utolsó demóval:

Ez a kocka alsó lapja! Mivel a második elem átlátszó, látnunk kell ennek a téglalapnak az alsó oldalát, ahogy a bal oldali példában is láthatjuk. Finom, de ott kell lennie!

Hozzáadhatunk egy színátmenetet a fő elemhez, és kivághatjuk, mint ahogyan az pszeudóknál tettük:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Íme a teljes kód, miután mindent összerakott:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

Ez az! Csak egy ügyes technikát alkalmaztunk, amely pszeudoelemeket, kúpos gradienseket, kivágást, háttérkeverést és negatív margókat használ, hogy ne egyet, hanem kettő édes megjelenésű 3D rakodók, amelyek nem tartalmaznak mást, mint egyetlen elemet a jelölésben.

Még több 3D

Továbbra is mehetünk, és végtelen számú 3D kockát szimulálhatunk egyetlen elem felhasználásával – igen, lehetséges! Íme a kockákból álló rács:

Ez a demó és a következő demók a cikk írásakor nem támogatottak a Safariban.

Őrült, igaz? Most egy ismétlődő mintát készítünk kockákból, amelyek egyetlen elem felhasználásával készülnek… és pszeudók nélkül! Nem megyek bele az általunk használt matematikai részletekbe (nagyon konkrét számok vannak benne), de itt van egy ábra, hogy szemléltesse, hogyan jutottunk el idáig:

Először használjuk a conic-gradient az ismétlődő kockaminta létrehozásához. A minta ismétlődését három változó szabályozza:

• --size: Nevéhez híven ez szabályozza az egyes kockák méretét.
• --m: Ez az oszlopok számát jelenti.
• --n: Ez a sorok száma.
• --gap: ez a kockák közötti rés vagy távolság

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Ezután egy maszkréteget alkalmazunk egy másik, azonos méretű mintával. Ez az ötlet legtrükkösebb része. Az a linear-gradient és egy conic-gradient elemünk néhány részét levágjuk, hogy csak a kockaformák maradjanak láthatóak.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

A kód kissé bonyolultnak tűnhet, de a CSS-változóknak köszönhetően mindössze néhány értéket kell frissítenünk a kockák mátrixának vezérléséhez. 10⨉10-es rácsra van szüksége? Frissítse a --m és a --n változókat 10. Nagyobb résre van szüksége a kockák között? Frissítse a --gap érték. A színértékek csak egyszer használatosak, ezért frissítse azokat egy új színpalettához!

Most, hogy van egy másik 3D-s technikánk, használjuk a betöltő variációinak létrehozására, különböző animációkkal játszva. Például, mit szólnál egy ismétlődő kockák mintájához, amelyek végtelenül balról jobbra csúsznak?

Ez a betöltő négy kockát határoz meg egyetlen sorban. Ez azt jelenti, hogy a miénk --n érték az 4 és a --m egyenlő 1 . Vagyis ezekre már nincs szükségünk!

Ehelyett dolgozhatunk a --size és a --gap Változók egy rácstárolóban:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

Ez a mi konténerünk. Négy kockánk van, de egyszerre csak hármat akarunk megjeleníteni a tartályban, hogy mindig egy becsússzon, miközben egy kicsúszik. Ezért számoljuk a szélességet 3 és állítsa be a képarányt 3 is.

Ügyeljünk arra, hogy a kockamintánk négy kocka szélességére legyen beállítva. Ezt a konténeren fogjuk megtenni ::before pszeudoelem:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Most, hogy négy kocka van egy háromkockás tárolóban, a kockamintát a rácstartály végére igazíthatjuk, hogy túlcsorduljon, az utolsó három kockát mutatva:

.loader { /* same as before */ justify-content: end;
}

Íme, amit eddig elértünk, piros körvonallal, amely a rácstároló határait mutatja:

Most már csak annyit kell tennünk, hogy a pszeudoelemet jobbra mozgatjuk az animációnk hozzáadásával:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Megértetted az animáció trükkjét? Fejezzük be a túlcsorduló kockaminta elrejtésével, és egy kis maszkolás hozzáadásával azt a halványító hatást, mint a kezdet és a vége:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

Ezt sokkal rugalmasabbá tehetjük egy változó bevezetésével, --n, annak beállításához, hogy egyszerre hány kocka jelenjen meg a tárolóban. És mivel a mintában szereplő kockák teljes számának eggyel többnek kell lennie --n, ezt úgy is kifejezhetjük calc(var(--n) + 1).

Íme a teljes dolog:

Rendben, még egy 3D betöltő, amely hasonló, de a kockák egymás után változtatják a színüket, nem pedig csúsztatnak:

Animált háttérre fogunk támaszkodni background-blend-mode ehhez:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

Eltávolítottam a felesleges kódot, amelyet az előző példával megegyező elrendezés létrehozásához használtam, de négy helyett három kockával. Amit itt hozzáadok, az egy meghatározott színnel meghatározott színátmenet, amely keveredik a kúpos gradienssel, ugyanúgy, mint korábban a folyamatjelző 3D betöltő esetében.

Innentől kezdve animálja a háttér gradienst background-position háromlépéses animációként, hogy a kockák egyenként villogjanak a színek.

Ha nem ismeri az általam használt értékeket background-position és a háttér szintaxisát, nagyon ajánlom egyik korábbi cikkem és az egyik a Stack Overflow válaszaim. Ott találsz egy nagyon részletes magyarázatot.

Frissíthetjük a kockák számát, hogy változókká tegyük?

Igen, van egy megoldás arra, de szeretném, ha inkább belevágna ahelyett, hogy ide ágyazná. Vegye figyelembe, amit az előző példából tanultunk, és próbálja meg ugyanezt tenni ezzel – majd ossza meg munkáját a megjegyzésekben!

Változatok bőven!

A sorozat másik három cikkéhez hasonlóan én is szeretnék inspirációt hagyni önnek, hogy saját rakodógépeket készítsen. Íme egy gyűjtemény, amely tartalmazza az általunk közösen készített 3D betöltőket, valamint néhány másikat, hogy megmozgassa a fantáziáját:

Ez egy pakolás

Nagyon remélem, hogy az elmúlt hetekben élvezte velem az egyelemes rakodógépek készítését. Őrület, hogy a látszólag egyszerű fonóval kezdtük, majd fokozatosan új darabokkal egészítettük ki magunkat egészen a 3D technikákig, amelyek még mindig csak egyetlen elemet használnak a jelölésben. Pontosan így néz ki a CSS, ha kihasználjuk képességeit: méretezhető, rugalmas és újrafelhasználható.

Még egyszer köszönöm, hogy elolvastad ezt a kis sorozatot! Aláírom, emlékeztetve, hogy van egy több mint 500 rakodó gyűjtemény ha további ötleteket és inspirációt keresel.

---

Single Element Loaders: Going 3D! 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ó.
• Source: https://css-tricks.com/single-element-loaders-going-3d/