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!
Serija Cool Hover Effects:
- Kul učinki lebdenja, ki uporabljajo lastnosti ozadja
- Kul učinki lebdenja, ki uporabljajo senco besedila CSS
- Kul učinki lebdenja, ki uporabljajo izrezovanje ozadja, maske in 3D (tukaj ste!)
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-clip
ping 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-path
in 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.
- "
- 2D
- 3d
- a
- O meni
- napredno
- naprej
- vsi
- Dovoli
- omogoča
- Alpha
- že
- znesek
- Še ena
- uporabna
- Uporabi
- pristopi
- OBMOČJE
- okoli
- članek
- članki
- ozadje
- ker
- med
- Bit
- meja
- Razčlenitev
- izgradnjo
- Building
- izziv
- spremenite
- Krom
- bližje
- zapiranje
- Koda
- zbirka
- kombinacija
- kombinirani
- v primerjavi z letom
- Dopolnilo
- kompleksna
- sestavljajo
- konfiguracija
- vsebina
- naprej
- koordinate
- pokrov
- ustvarjajo
- ustvari
- po meri
- Dash
- zamuda
- Podatki
- DID
- drugačen
- Ne
- enostavno
- učinek
- Učinki
- elementi
- itd
- vse
- Primer
- Primeri
- Razen
- poskus
- raziskuje
- Feet
- Slika
- Firefox
- prva
- po
- sledi
- format
- iz
- nadalje
- pridobivanje
- Giving
- Pogled
- Cilj
- dogaja
- dobro
- Zelen
- se zgodi
- pomoč
- tukaj
- Skrij
- Kako
- Kako
- Vendar
- HTTPS
- slike
- nemogoče
- V drugi
- narašča
- neodvisno
- Navdih
- instant
- medsebojno delovanje
- Vprašanja
- IT
- Vedite
- znano
- UČITE
- naučili
- učenje
- ravni
- Verjeten
- vrstica
- Povezave
- malo
- Long
- Poglej
- Pogledal
- si
- je
- Znamka
- IZDELA
- Izdelava
- upravljanje
- upravlja
- Maska
- Maske
- Matter
- pomeni
- morda
- več
- Najbolj
- premikanje
- Gibanje
- Mozilla
- več
- odprite
- Optimizirajte
- Ostalo
- del
- popolna
- perspektive
- Predvajaj
- točke
- Prispevkov
- praksa
- precej
- prejšnja
- proizvodnja
- Lastnosti
- nepremičnine
- dosežejo
- uresničitev
- zmanjša
- Run
- Safari
- Enako
- Serija
- nastavite
- Shadow
- Oblikujte
- Podoben
- Enostavno
- sam
- Velikosti
- So
- trdna
- nekaj
- Nekaj
- Vesolje
- postopka
- Začetek
- začel
- Države
- Še vedno
- podpora
- Površina
- Preklop
- taktike
- ob
- Pogovor
- pogovor
- tehnike
- O
- stvar
- stvari
- Razmišljanje
- 3
- skozi
- čas
- krat
- skupaj
- vrh
- na dotik
- Prehod
- Preglednost
- pregleden
- razumeli
- razumevanje
- Nadgradnja
- us
- uporaba
- vrednost
- vidna
- hotel
- Spletna stran
- Kaj
- Kaj je
- medtem
- brez
- besede
- delo
- deluje
- bi
- Vaša rutina za