Ühe elemendiga laadurid: läheb 3D-sse!

Selle meie neljanda ja viimase artikli jaoks väikesed seeriad üheelemendilistel laaduritel, uurime 3D-mustreid. 3D-elemendi loomisel on raske ette kujutada, et ühest HTML-elemendist piisab, et simuleerida midagi, nagu kuubiku kõik kuus tahku. Aga võib-olla pääseme veel millegi kuubikuganagu selle asemel, et näidata ainult kujundi kolme esikülge – see on täiesti võimalik ja see on see, mida me koos teeme.

Tükeldatud kuubiku laadur

Siin on 3D-laadur, kus kuubik on jagatud kaheks osaks, kuid on tehtud ainult ühest elemendist:

Kuubiku iga pool on tehtud pseudoelemendi abil:

Lahe, eks?! CSS-iga saame kasutada koonuse gradienti clip-path elemendi peal ::before ja ::after pseudod, et simuleerida 3D-kuubiku kolme nähtavat külge. Negatiivne veeris tõmbab kaks pseudot kokku, et kattuda ja simuleerida täiskuubikut. Meie ülejäänud töö seisneb peamiselt nende kahe poole animeerimises, et saada kena välimusega laadurid!

Vaatame visuaali, mis selgitab selle kuubitaolise elemendi loomiseks kasutatud lõiketee punktide taga olevat matemaatikat:

Meil on oma muutujad ja võrrand, nii et paneme need tööle. Esiteks määrame oma muutujad ja määrame peamise suuruse .loader Element:

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

Seni pole midagi hullu. Meil on 150px ruut, mis on seadistatud painduva konteinerina. Nüüd loome oma pseudod:

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

Need on kaks poolt .loader konteiner. Peame need sisse värvima, nii et see on meie koht kooniline gradient lööb sisse:

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

Gradient on olemas, kuid see näeb imelik välja. Me peame kinnitage see elemendi külge:

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

Veenduge, et kaks poolt kattuvad a-ga negatiivne marginaal:

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

Nüüd paneme nad liikuma!

.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)) }
}

Siin on veel kord viimane demo:

Edukuubiku laadija

Kasutame sama tehnikat 3D edenemislaaduri loomiseks. Jah, ikka ainult üks element!

Me ei muuda midagi niivõrd, kuivõrd simuleerime kuubi samamoodi nagu varem, peale laaduri kõrguse ja kuvasuhte muutmise. Animatsioon, mida me teeme, tugineb üllatavalt lihtsale tehnikale, kus me värskendame vasaku külje laiust, samal ajal kui parem pool täidab ülejäänud ruumi, tänu flex-grow: 1.

Esimene samm on parempoolsele küljele veidi läbipaistvust lisada opacity:

See simuleerib efekti, et kuubi üks külg on täidetud, teine ​​aga tühi. Seejärel värskendame vasaku külje värvi. Selleks värskendame kolme värvi koonilise gradiendi sees või lisame taustavärvi background-blend-mode:

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

See trikk võimaldab meil värvi ainult üks kord värskendada. Laaduri parem pool sulandub koonuse gradiendi kolme valge varjundiga, et luua kolm uut värvitooni, kuigi kasutame ainult ühte värviväärtust. Värvipettus!

Animeerime laaduri vasaku külje laiuse:

Oeh, animatsioon on alguses natuke imelik! Kas märkate, kuidas see algab väljaspool kuubikut? Seda seetõttu, et alustame animatsiooniga 0% laius. Kuid tänu clip-path ja negatiivse marginaaliga, mida me kasutame, peame selle asemel alustama omast --_d muutuja, mida kasutasime defineerimiseks clip-path punktid ja negatiivne marginaal:

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

See on natuke parem:

Kuid me saame selle animatsiooni veelgi sujuvamaks muuta. Kas märkasite, et meil on midagi puudu? Lubage mul näidata teile ekraanipilti, et võrrelda, milline peaks lõplik demo selle viimase demoga välja nägema:

See on kuubi alumine külg! Kuna teine ​​element on läbipaistev, peame nägema selle ristküliku alumist külge, nagu näete vasakpoolses näites. See on peen, kuid see peaks olema olemas!

Saame põhielemendile lisada gradiendi ja lõigata selle nagu pseudodega:

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

Siin on täielik kood, kui kõik on kokku võetud:

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

See on kõik! Kasutasime lihtsalt nutikat tehnikat, mis kasutab pseudoelemente, koonuse gradiente, lõikamist, tausta segamist ja negatiivseid veerisid, et saada mitte üks, vaid kaks kena välimusega 3D-laadurid, mille märgistuses on ainult üks element.

Rohkem 3D-d

Saame siiski minna kaugemale ja simuleerida ühe elemendi abil lõpmatu arvu 3D-kuubikuid – jah, see on võimalik! Siin on kuubikute ruudustik:

Seda demo ja järgmisi demosid Safaris selle kirjutamise ajal ei toetata.

Hull, eks? Nüüd loome korduva mustri kuubikutest, mis on tehtud ühest elemendist... ja ilma pseudodeta! Ma ei hakka üksikasjalikult kirjeldama kasutatavat matemaatikat (seal on väga konkreetsed numbrid), kuid siin on joonis, et visualiseerida, kuidas me siia jõudsime:

Esmalt kasutame a conic-gradient korduva kuubiku mustri loomiseks. Mustri kordumist juhivad kolm muutujat:

• --size: Nimele kohaselt juhib see iga kuubi suurust.
• --m: see tähistab veergude arvu.
• --n: see on ridade arv.
• --gap: see vahe või kaugus kuubikute vahel

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

Seejärel rakendame maskikihi, kasutades teist sama suurusega mustrit. See on selle idee kõige keerulisem osa. Kasutades kombinatsiooni a linear-gradient ja conic-gradient lõikame oma elemendist mõned osad, et ainult kuubikukujud oleksid nähtavad.

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

Kood võib tunduda pisut keeruline, kuid tänu CSS-i muutujatele on meil vaja vaid värskendada mõningaid väärtusi, et meie kuubikute maatriksit juhtida. Kas vajate 10⨉10 võrku? Värskendage --m ja --n muutujad kuni 10. Kas vajate kuubikute vahel laiemat vahet? Värskendage --gap väärtus. Värviväärtusi kasutatakse ainult üks kord, seega värskendage neid uue värvipaleti jaoks!

Nüüd, kui meil on veel üks 3D-tehnika, kasutame seda laaduri variatsioonide loomiseks, mängides erinevate animatsioonidega. Kuidas oleks näiteks korduva kuubikute mustriga, mis libisevad lõpmatult vasakult paremale?

See laadur määratleb neli kuupi ühes reas. See tähendab meie --n väärtus ei 4 ja --m on võrdne 1 . Teisisõnu, me ei vaja neid enam!

Selle asemel saame töötada koos --size ja --gap muutujad ruudustiku konteineris:

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

See on meie konteiner. Meil on neli kuubikut, kuid tahame konteineris korraga kuvada ainult kolme, et meil oleks alati üks sisse libisemine ja üks välja libisemine. Seetõttu arvestame laiust 3 ja seadke kuvasuhe väärtusele 3 samuti.

Veenduge, et meie kuubiku muster oleks nelja kuubi laiusele. Me teeme seda konteineris ::before pseudoelement:

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

Nüüd, kui meil on kolme kuubikuga konteineris neli kuubikut, saame kuubiku mustri ruudustiku konteineri otsani joondada, et see üle voolaks, näidates kolme viimast kuubikut:

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

Siin on see, mis meil seni on koos punase piirjoonega, mis näitab ruudustiku konteineri piire:

Nüüd tuleb vaid pseudoelement paremale liigutada, lisades meie animatsiooni:

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

Kas said animatsiooni nipist aru? Lõpetagem see, peites ülevoolava kuubikumustri ja lisades veidi maskeerimist, et luua tuhmumisefekt, nagu algus ja lõpp:

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

Saame seda palju paindlikumaks muuta, lisades muutuja, --n, et määrata, mitu kuubikut konteineris korraga kuvatakse. Ja kuna kuubikute koguarv mustris peaks olema üks rohkem kui --n, saame seda väljendada kui calc(var(--n) + 1).

Siin on kogu asi:

OK, veel üks 3D-laadur, mis on sarnane, kuid mille kuubikud muudavad värvi libisemise asemel järjest:

Toetume animeeritud taustale background-blend-mode selle jaoks:

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

Eemaldasin üleliigse koodi, mida kasutati sama paigutuse loomiseks nagu viimane näide, kuid nelja kuubi asemel kolm. Lisan siia gradiendi, mis on määratletud kindla värviga, mis sulandub koonilise gradiendiga, täpselt nagu tegime varem edenemisriba 3D-laaduri puhul.

Sealt edasi animeerib see tausta gradiente background-position kolmeastmelise animatsioonina, et panna kuubikud ükshaaval värve vilkuma.

Kui te pole kursis väärtustega, mille jaoks ma kasutan background-position ja tausta süntaks, soovitan soojalt üks minu varasematest artiklitest ja üks minu Stack Overflow vastused. Sealt leiate väga üksikasjaliku selgituse.

Kas me saame kuubikute arvu värskendada, et muuta see muutujateks?

Jah, mul on a lahendus selleks, kuid ma tahaksin, et te selle siia manustamise asemel teeksite. Võtke see, mida oleme eelmisest näitest õppinud, ja proovige sama teha selle näitega — jagage oma tööd kommentaarides!

Variatsioone palju!

Nagu selle sarja ülejäänud kolm artiklit, tahaksin ka teile anda inspiratsiooni oma laadurite loomiseks. Siin on kollektsioon, mis sisaldab meie koos tehtud 3D-laadureid ja veel mõnda, et teie kujutlusvõimet käima lükata:

See on mähis

Ma kindlasti loodan, et teile meeldis viimastel nädalatel minuga üheelemendilisi laadureid tehes aega veeta. See on hull, et alustasime pealtnäha lihtsa spinneriga ja seejärel lisasime järk-järgult uusi tükke, et töötada kuni 3D-tehnikateni, mis kasutavad märgistuses siiski ainult ühte elementi. Täpselt selline näeb CSS välja, kui kasutame selle võimeid: skaleeritav, paindlik ja korduvkasutatav.

Aitäh veel kord, et lugesite seda väikest sarja! Kirjutan alla, tuletades teile meelde, et mul on a rohkem kui 500 laaduri kollektsioon kui otsite rohkem ideid ja inspiratsiooni.

---

Ühe elemendiga laadurid: läheb 3D-sse! algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Allikas: https://css-tricks.com/single-element-loaders-going-3d/