Kul učinki lebdenja CSS, ki uporabljajo izrezovanje ozadja, maske in 3D

Sprehodili smo se skozi vrsto objav o zanimivih pristopih k učinkom lebdenja CSS. Začeli smo z a kup primerov, ki uporabljajo CSS background Lastnosti, nato pa prešel na text-shadow posest, kjer tehnično nismo uporabili nobenih senc. Kombinirali smo jih tudi s spremenljivkami CSS in calc() da optimizirate kodo in olajšate upravljanje.

V tem članku bomo gradili na teh dveh členih, da bi ustvarili še bolj zapletene animacije lebdenja CSS. Govorimo o izrezovanju ozadja, maskah CSS in celo o mokrenju nog s 3D perspektivami. Z drugimi besedami, tokrat bomo raziskali napredne tehnike in premaknili meje tega, kar lahko CSS naredi z učinki lebdenja!

---

Tukaj je samo okus tega, kar pripravljamo:

Uporaba učinkov lebdenja background-clip

Pogovorimo se background-clip. Ta lastnost CSS sprejema a text vrednost ključne besede ki nam omogoča uporabo prelivov na besedilo elementa namesto dejanskega ozadje.

Tako lahko na primer spremenimo barvo besedila ob lebdenju, kot bi to storili z uporabo color lastnost, vendar na ta način animiramo spremembo barve:

Vse, kar sem naredil, je bilo dodajanje background-clip: text na element in transition o background-position. Ni treba, da je bolj zapleteno od tega!

Vendar lahko naredimo bolje, če združimo več prelivov z različnimi vrednostmi izrezovanja ozadja.

V tem primeru uporabljam dva različna preliva in dve vrednosti z background-clip. Prvi preliv ozadja je prirezan na besedilo (zahvaljujoč text vrednost), da nastavite barvo pri lebdenju, medtem ko drugi preliv ozadja ustvari spodnji podčrt (zahvaljujoč padding-box vrednost). Vse ostalo je naravnost prekopirano delo, ki smo ga opravili v prvem članku te serije.

Kaj pa učinek lebdenja, pri katerem vrstica drsi od zgoraj navzdol na način, kot da je besedilo optično prebrano in nato obarvano:

Tokrat sem spremenil velikost prvega gradienta, da sem ustvaril črto. Nato ga potisnem z drugim prelivom, ki posodobi barvo besedila, da ustvarim iluzijo! Lahko si predstavljate, kaj se dogaja v tem peresu:

Opraskali smo le površje tega, kar lahko storimo z našimi background-clipping moči! Vendar pa je ta tehnika verjetno nekaj, čemur bi se želeli izogniti uporabi v proizvodnji, saj je znano, da ima Firefox veliko prijavljenih napak v zvezi z background-clip. Safari ima tudi težave s podporo. Tako ostane samo Chrome s trdno podporo za te stvari, zato ga morda odprite, ko nadaljujemo.

Preidimo na drug učinek lebdenja z uporabo background-clip:

Verjetno mislite, da je ta videti super enostaven v primerjavi s tem, kar smo pravkar obravnavali – in prav imate, tukaj ni nič posebnega. Vse, kar počnem, je drsenje enega gradienta, medtem ko povečujem velikost drugega.

Ampak tukaj smo, da pogledamo napredne učinke lebdenja, kajne? Spremenimo ga nekoliko, da bo animacija drugačna, ko kazalec miške zapusti element. Isti učinek lebdenja, vendar drugačen konec animacije:

Kul kajne? razčlenimo kodo:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Imamo tri plasti ozadja - dva preliva in background-color definirano z uporabo --_c spremenljivka, ki je prvotno nastavljena na transparentno (#0000). Ko lebdimo, spremenimo barvo v belo in --_c spremenljiva na glavno barvo (--c).

Evo, kaj se dogaja na tem transition: Najprej uporabimo prehod za vse, vendar zakasnimo color in background-color by 0.5s da ustvarite učinek drsenja. Takoj za tem spremenimo color in background-color. Morda ne boste opazili nobenih vizualnih sprememb, ker je besedilo že belo (zahvaljujoč prvemu prelivu), ozadje pa je že nastavljeno na glavno barvo (zahvaljujoč drugemu prelivu).

Nato, ko je miška zunaj, uporabimo takojšnjo spremembo za vse (upoštevajte 0s zamudo), razen za color in background-color ki imajo prehod. To pomeni, da vse prelive vrnemo v začetna stanja. Še enkrat, verjetno ne boste videli nobenih vizualnih sprememb, ker besedilo color in background-color že spremenjeno ob lebdenju.

Nazadnje uporabimo bledenje za barvo in a background-color da ustvarite del animacije z miško. Vem, morda je težko razumeti, vendar si lahko trik bolje vizualizirate z uporabo različnih barv:

Večkrat premaknite miško na zgoraj in videli boste lastnosti, ki se animirajo, ko lebdite, in tiste, ki se animirajo, ko miško umaknete. Nato lahko razumete, kako smo dosegli dve različni animaciji za isti učinek lebdenja.

Ne pozabimo tehniko DRY preklopa, ki smo jo uporabili v prejšnjih člankih te serije, da bi zmanjšali količino kode z uporabo samo ene spremenljivke za stikalo:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Če se sprašujete, zakaj sem za glavno barvo posegel po sintaksi RGB, je to zato, ker sem se moral igrati s prosojnostjo alfa. Uporabljam tudi spremenljivko --_t za zmanjšanje odvečnega izračuna, uporabljenega v transition nepremičnine.

Preden preidemo na naslednji del, je tu še več primerov učinkov lebdenja, ki sem jih naredil pred časom in ki temeljijo na background-clip. Bilo bi predolgo, da bi podrobno opisali vsakega, toda s tem, kar smo se do zdaj naučili, lahko preprosto razumete kodo. Lahko je dober navdih, da nekatere od njih preizkusite sami, ne da bi pogledali kodo.

Vem, vem. To so nori in neobičajni učinki lebdenja in zavedam se, da jih je v večini primerov preveč. Ampak to je, kako vaditi in se učiti CSS. Ne pozabite, mi premikanje meja učinkov lebdenja CSS. Učinek lebdenja je morda novost, vendar se ob tem učimo novih tehnik, ki jih je zagotovo mogoče uporabiti za druge stvari.

Učinki lebdenja z uporabo CSS mask

Ugani kaj? CSS mask Lastnost uporablja prelive na enak način kot background lastnost, tako da boste videli, da je to, kar bomo naredili, precej preprosto.

Začnimo z izdelavo modnega podčrtaja.

Uporabljam background da ustvarite cik-cak spodnjo obrobo v tej predstavitvi. Če bi želel uporabiti animacijo za ta podčrtaj, bi bilo to dolgočasno narediti samo z lastnostmi ozadja.

Vnesite CSS mask.

Koda je morda videti čudna, vendar je logika še vedno enaka kot pri vseh prejšnjih animacijah v ozadju. The mask je sestavljen iz dveh gradientov. Prvi gradient je definiran z neprozorno barvo, ki pokriva področje vsebine (zahvaljujoč content-box vrednost). Ta prvi gradient naredi besedilo vidno in skrije spodnjo cik-cak obrobo. content-box ali je mask-clip vrednost, ki se obnaša enako kot background-clip

linear-gradient(#000 0 0) content-box

Drugi gradient bo pokrival celotno območje (zahvaljujoč padding-box). Ta ima širino, ki je definirana z uporabo --_p spremenljivka in bo postavljena na levo stran elementa.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Vse kar moramo storiti je, da spremenimo vrednost --_p pri lebdenju, da ustvarite učinek drsenja za drugi gradient in razkrijete podčrtaj.

.hover:hover { --_p: 100%; color: var(--c);
}

Naslednja predstavitev uporablja plasti maske kot ozadja, da bolje vidite, kako se trik dogaja. Predstavljajte si, da sta zeleni in rdeči del vidna dela elementa, medtem ko je vse ostalo prosojno. To bo naredila maska, če z njo uporabimo enake prelive.

S takšnim trikom lahko enostavno ustvarimo veliko variacij, tako da preprosto uporabimo drugačno konfiguracijo gradienta z mask lastnost:

Vsak primer v tej predstavitvi uporablja nekoliko drugačno konfiguracijo gradienta za mask. Upoštevajte tudi ločitev v kodi med konfiguracijo ozadja in konfiguracijo maske. Lahko jih upravljate in vzdržujete neodvisno.

Spremenimo konfiguracijo ozadja tako, da zamenjamo cik-cak podčrtaj z valovitim podčrtajem:

Še ena zbirka učinkov lebdenja! Ohranil sem vse konfiguracije maske in spremenil ozadje, da sem ustvaril drugačno obliko. Zdaj lahko razumete, kako sem lahko da dosežete 400 učinkov lebdenja brez psevdoelementov — in še vedno jih je lahko več!

Kot, zakaj ne nekaj takega:

Tukaj je izziv za vas: Obroba v zadnji predstavitvi je gradient, ki uporablja mask lastnino, da jo razkrije. Ali lahko ugotovite logiko za animacijo? Morda je na prvi pogled videti zapleteno, vendar je zelo podobno logiki, ki smo jo opazovali pri večini drugih učinkov lebdenja, ki temeljijo na prelivih. Objavite svojo razlago v komentarjih!

Učinki lebdenja v 3D

Morda mislite, da je nemogoče ustvariti 3D učinek z enim samim elementom (in brez uporabe psevdoelementov!), vendar ima CSS način, kako to uresničiti.

To, kar vidite tam, ni pravi 3D-učinek, temveč popolna iluzija 3D-ja v 2D-prostoru, ki združuje CSS background, clip-pathin transform lastnosti.

Prva stvar, ki jo naredimo, je, da definiramo svoje spremenljivke:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Nato ustvarimo pregleden rob s širinami, ki uporabljajo zgornje spremenljivke:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Zgornja in desna stran elementa morata biti enaki --b vrednost, medtem ko morata biti spodnja in leva stran enaki vsoti --b in --d (ki je --_s spremenljivka).

Za drugi del trika moramo definirati en gradient, ki pokriva vsa mejna območja, ki smo jih prej definirali. A conic-gradient bo deloval za to:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Dodamo še en gradient za tretji del trika. Ta bo uporabil dve polprosojni vrednosti bele barve, ki se prekrivata s prvim prejšnjim gradientom, da bi ustvarili različne odtenke glavne barve, kar nam daje iluzijo senčenja in globine.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Zadnji korak je uporaba a CSS clip-path zmanjšati vogale za ta občutek dolge sence:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

To je vse! Pravkar smo naredili 3D pravokotnik z dvema prelivoma in a clip-path ki jih lahko enostavno prilagodimo s spremenljivkami CSS. Vse, kar moramo storiti, je, da ga animiramo!

Bodite pozorni na koordinate iz prejšnje slike (označene rdeče). Posodobimo jih, da ustvarimo animacijo:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Trik je v tem, da skrijete spodnji in levi del elementa, tako da je vse, kar ostane, pravokoten element brez kakršne koli globine.

To pero izolira clip-path del animacije, da vidite, kaj počne:

Zadnji dotik je premikanje elementa v nasprotni smeri z uporabo translate — in iluzija je popolna! Tukaj je učinek uporabe različnih vrednosti lastnosti po meri za različne globine:

Drugi učinek lebdenja sledi isti strukturi. Vse, kar sem naredil, je, da sem posodobil nekaj vrednosti, da sem ustvaril zgornji levi premik namesto zgornjega desnega.

Kombinacija učinkov!

Izjemna stvar pri vsem, kar smo obravnavali, je, da se vsi dopolnjujejo. Tukaj je primer, kjer dodajam o text-shadow učinek iz drugega člena v seriji do background tehnika animacije iz prvega članka pri uporabi 3D trika, ki smo ga pravkar obravnavali:

Dejanska koda je sprva morda zmedena, vendar jo nadaljujte in jo razčlenite še malo – opazili boste, da je to zgolj kombinacija teh treh različnih učinkov, ki so precej zmešani skupaj.

Naj zaključim ta članek z učinkom zadnjega lebdenja, kjer združujem ozadje, pot posnetka in kanček perspective za simulacijo drugega 3D učinka:

Enak učinek sem uporabil za slike in rezultat je bil precej dober za simulacijo 3D z enim samim elementom:

Želite podrobneje videti, kako deluje ta zadnja predstavitev? Nekaj ​​sem napisal o tem.

Zavijanje

Uf, končali smo! Vem, da je CSS precej zapleten, vendar (1) smo na pravem spletnem mestu za take stvari in (2) cilj je dvigniti naše razumevanje različnih lastnosti CSS na novo raven tako, da jim omogočimo interakcijo z drug drugega.

Morda se sprašujete, kaj je naslednji korak od tukaj zdaj, ko zaključujemo to majhno serijo naprednih učinkov lebdenja CSS. Rekel bi, da je naslednji korak, da vzamemo vse, kar smo se naučili, in to uporabimo pri drugih elementih, kot so gumbi, elementi menija, povezave itd. Stvari smo ohranili precej preproste, kar zadeva omejitev naših trikov na element naslova prav iz tega razloga ; dejanski element ni pomemben. Vzemite koncepte in tecite z njimi ter ustvarjajte, eksperimentirajte in se učite novih stvari!

---

Kul učinki lebdenja CSS, ki uporabljajo izrezovanje ozadja, maske in 3D 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.
• Vir: https://css-tricks.com/css-hover-effects-background-masks-3d/