Hienoja CSS-hover-tehosteita, jotka käyttävät taustaleikkausta, naamioita ja 3D:tä

Olemme nyt käyneet läpi useita viestejä mielenkiintoisista lähestymistavoista CSS-hover-tehosteisiin. Aloitimme a:lla joukko esimerkkejä, jotka käyttävät CSS:ää background ominaisuudet, siirtyi sitten kohtaan text-shadow kiinteistö missä emme teknisesti käyttäneet varjoja. Yhdistimme ne myös CSS-muuttujiin ja calc() optimoidaksesi koodin ja helpottaaksesi sen hallintaa.

Tässä artikkelissa rakennamme nämä kaksi artikkelia luodaksemme entistä monimutkaisempia CSS-hover-animaatioita. Puhumme taustaleikkauksesta, CSS-maskeista ja jopa jalkojen kastelemisesta 3D-perspektiivien avulla. Toisin sanoen aiomme tällä kertaa tutkia edistyneitä tekniikoita ja ylittää rajoja, mitä CSS voi tehdä leijutustehosteilla!

---

Tässä vain esimakua tekemästämme:

Hover-tehosteet käyttämällä background-clip

Puhutaan background-clip. Tämä CSS-ominaisuus hyväksyy a text avainsanan arvo jonka avulla voimme soveltaa gradientteja teksti elementin todellisen sijaan tausta.

Joten voimme esimerkiksi muuttaa tekstin väriä hiirellä, kuten käyttäisimme color ominaisuutta, mutta tällä tavalla animoimme värinmuutoksen:

Tein vain lisäämisen background-clip: text elementtiin ja transition Ishayoiden opettaman background-position. Ei sen tarvitse olla sen monimutkaisempaa!

Mutta voimme tehdä paremmin, jos yhdistämme useita liukuvärejä erilaisiin taustan leikkausarvoihin.

Tässä esimerkissä käytän kahta erilaista gradienttia ja kahta arvoa background-clip. Ensimmäinen taustagradientti leikataan tekstiin (kiitos text arvo) asettaaksesi värin päälle, kun taas toinen taustagradientti luo alimman alleviivauksen (kiitos padding-box arvo). Kaikki muu on suoraan kopioitu työ, jonka teimme ensimmäisessä artikkelissa tämän sarjan.

Entä hover-tehoste, jossa palkki liukuu ylhäältä alas tavalla, joka näyttää siltä, ​​​​että teksti on skannattu ja väritetty sitten:

Tällä kertaa muutin ensimmäisen liukuvärin kokoa luodakseni viivan. Sitten liu'utan sitä toisella liukuvärillä, joka päivittää tekstin värin luodakseni illuusion! Voit visualisoida mitä tässä kynässä tapahtuu:

Olemme vain raapuneet pintaa siitä, mitä voimme tehdä omallamme background-clipping voimat! Tätä tekniikkaa kannattaa kuitenkin todennäköisesti välttää tuotannossa, sillä Firefoxilla tiedetään olevan a paljon raportoituja bugeja liittyen background-clip. Safarilla on myös tukiongelmia. Tämä jättää vain Chromelle vankan tuen tälle tavaralle, joten ehkä avaa se, kun jatkamme.

Siirrytään toiseen hover-efektiin käyttämällä background-clip:

Luultavasti luulet, että tämä näyttää erittäin helpolta verrattuna siihen, mitä juuri käsittelimme – ja olet oikeassa, tässä ei ole mitään hienoa. Ainoa mitä teen, on liu'uttaa yhtä gradienttia samalla kun lisään toisen kokoa.

Mutta olemme täällä tarkastellaksemme edistyneitä hover-tehosteita, eikö niin? Muutetaan sitä hieman, jotta animaatio on erilainen, kun hiiren kursori poistuu elementistä. Sama hover-efekti, mutta animaatiolle erilainen loppu:

Siistiä eikö? tutkitaan koodia:

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

Meillä on kolme taustatasoa - kaksi kaltevuutta ja background-color määritelty käyttämällä --_c muuttuja, joka on alun perin asetettu läpinäkyväksi (#0000). Kun leijuttaa, vaihdamme värin valkoiseksi ja --_c muuttuva päävärin mukaan (--c).

Tässä on mitä siinä tapahtuu transition: Ensin käytämme siirtymää kaikkeen, mutta viivytämme color ja background-color by 0.5s luodaksesi liukuvan tehosteen. Heti sen jälkeen muutamme color ja background-color. Et ehkä huomaa visuaalisia muutoksia, koska teksti on jo valkoinen (ensimmäisen liukuvärin ansiosta) ja tausta on jo asetettu pääväriin (toisen liukuvärin ansiosta).

Kun hiiren osoitin poistuu, teemme välittömän muutoksen kaikkeen (huomaa 0s viive), paitsi color ja background-color joissa on siirtymä. Tämä tarkoittaa, että asetamme kaikki gradientit takaisin alkuperäisiin tiloihinsa. Jälleen, et todennäköisesti näe visuaalisia muutoksia, koska teksti color ja background-color jo vaihdettu leijuttaessa.

Lopuksi levitämme haalistumista väriin ja a background-color luodaksesi animaation hiiren pois osan. Tiedän, se voi olla hankala käsittää, mutta voit visualisoida tempun paremmin käyttämällä eri värejä:

Pidä yllä olevaa hiiren osoitinta monta kertaa, niin näet ominaisuudet, jotka animoituvat hiirellä ja ne, jotka animoituvat hiirellä ulos. Ymmärrät sitten, kuinka saavutimme kaksi eri animaatiota samalle hover-efektille.

Älkäämme unohtako käyttämämme DRY-kytkentätekniikka tämän sarjan aiemmissa artikkeleissa auttaaksesi vähentämään koodin määrää käyttämällä vain yhtä muuttujaa kytkimessä:

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

Jos ihmettelet, miksi päädyin päävärin RGB-syntaksiin, se johtuu siitä, että minun piti leikkiä alfaläpinäkyvyydellä. Käytän myös muuttujaa --_t vähentääksesi siinä käytettyä ylimääräistä laskelmaa transition omaisuutta.

Ennen kuin siirrymme seuraavaan osaan, tässä on lisää esimerkkejä hover-tehosteista, joita tein jokin aika sitten ja joihin luotan background-clip. Olisi liian pitkää yksityiskohtaisesti kuvata jokaista, mutta tähän mennessä oppimamme avulla voit helposti ymmärtää koodin. Voi olla hyvä inspiraatio kokeilla joitain niistä yksin katsomatta koodia.

Tiedän tiedän. Nämä ovat hulluja ja harvinaisia ​​hover-efektejä, ja ymmärrän, että ne ovat liikaa useimmissa tilanteissa. Mutta näin harjoitellaan ja opitaan CSS:ää. Muista, me koetella rajoja CSS-hover-tehosteista. Hover-efekti voi olla uutuus, mutta opimme matkan varrella uusia tekniikoita, joita voidaan varmasti käyttää muihin asioihin.

Hover-tehosteet CSS:n avulla mask

Arvaa mitä? CSS mask ominaisuus käyttää gradientteja samalla tavalla kuin background omaisuus tekee, joten näet, että seuraavaksi tekemämme on melko yksinkertaista.

Aloitetaan rakentamalla hieno alleviivaus.

Käytän background luodaksesi siksak-muotoisen alareunuksen kyseisessä esittelyssä. Jos haluaisin käyttää animaation tuohon alleviivaukseen, olisi tylsää tehdä se pelkällä taustaominaisuuksilla.

Syötä CSS mask.

Koodi saattaa näyttää oudolta, mutta logiikka on edelleen sama kuin kaikissa aiemmissa taustaanimaatioissa. The mask koostuu kahdesta gradientista. Ensimmäinen gradientti määritellään läpinäkymättömällä värillä, joka peittää sisältöalueen (kiitos content-box arvo). Ensimmäinen liukuväri tekee tekstistä näkyvän ja piilottaa alimman siksak-reunuksen. content-box on mask-clip arvo, joka käyttäytyy samalla tavalla kuin background-clip

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

Toinen gradientti kattaa koko alueen (kiitos padding-box). Tällä on leveys, joka on määritetty käyttämällä --_p muuttuja, ja se sijoitetaan elementin vasemmalle puolelle.

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

Nyt meidän tarvitsee vain muuttaa arvoa --_p vie hiiri päälle luodaksesi liukuvan tehosteen toiselle liukuvärille ja paljastaaksesi alleviivauksen.

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

Seuraavassa esittelyssä käytetään maskikerroksia taustana, jotta tempun näkee paremmin. Kuvittele, että vihreä ja punainen osa ovat elementin näkyviä osia, kun taas kaikki muu on läpinäkyvää. Näin naamio tekee, jos käytämme samoja gradientteja sen kanssa.

Tällaisen tempun avulla voimme helposti luoda paljon variaatioita käyttämällä yksinkertaisesti erilaista gradienttikonfiguraatiota mask omaisuus:

Jokainen esittelyn esimerkki käyttää hieman erilaista gradienttikokoonpanoa mask. Huomaa myös, että koodissa on ero taustamäärityksen ja maskin kokoonpanon välillä. Niitä voidaan hallita ja ylläpitää itsenäisesti.

Muutetaan taustakokoonpanoa korvaamalla siksak-alleviivaus aaltoilevalla alleviivauksella:

Toinen kokoelma hover-tehosteita! Säilytin kaikki maskin asetukset ja vaihdoin taustaa luodakseni erilaisen muodon. Nyt ymmärrät kuinka pystyin saavuttaa 400 hover-efektiä ilman pseudoelementtejä – ja meillä on vielä enemmän!

Kuten, miksi ei jotain tällaista:

Tässä sinulle haaste: Viimeisimmän esittelyn reunus on gradientti, joka käyttää mask omaisuutta paljastaa se. Voitko selvittää animaation takana olevan logiikan? Se saattaa näyttää ensi silmäyksellä monimutkaiselta, mutta se on erittäin samanlainen kuin logiikka, jota olemme tarkastelleet useimpien muiden liukuväreihin perustuvien hover-tehosteiden kohdalla. Kirjoita selitys kommentteihin!

Hover-tehosteet 3D:ssä

Saatat ajatella, että on mahdotonta luoda 3D-tehostetta yhdestä elementistä (ja ilman pseudoelementtejä!), mutta CSS:llä on tapa saada se tapahtumaan.

Siellä näkemäsi ei ole todellinen 3D-efekti, vaan täydellinen illuusio 3D:stä 2D-tilassa, joka yhdistää CSS:n background, clip-pathja transform ominaisuudet.

Ensimmäinen asia, jonka teemme, on määrittää muuttujamme:

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

Sitten luomme läpinäkyvän reunuksen, jonka leveydet käyttävät yllä olevia muuttujia:

--_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);

Elementin ylä- ja oikea puoli on yhtä suuri --b arvo, kun taas ala- ja vasemman puolen on oltava yhtä suuria kuin summa --b ja --d (kumpi on --_s muuttuja).

Tempun toista osaa varten meidän on määritettävä yksi gradientti, joka kattaa kaikki aiemmin määrittämämme raja-alueet. A conic-gradient toimii siihen:

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;

Lisäämme toisen gradientin tempun kolmanteen osaan. Tämä käyttää kahta puoliläpinäkyvää valkoista väriarvoa, jotka menevät päällekkäin ensimmäisen edellisen gradientin kanssa luomaan eri sävyjä pääväristä, mikä antaa meille illuusion varjosta ja syvyydestä.

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

Viimeinen vaihe on soveltaa a CSS clip-path leikata kulmat tuolle pitkän varjon tunteelle:

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

Siinä kaikki! Teimme juuri 3D-suorakulmion, jossa oli vain kaksi gradienttia ja a clip-path joita voimme helposti säätää CSS-muuttujien avulla. Nyt meidän tarvitsee vain animoida se!

Huomaa edellisen kuvan koordinaatit (merkitty punaisella). Päivitetään ne animaation luomiseksi:

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)) */
)

Temppu on piilottaa elementin ala- ja vasen osa, jotta jäljelle jää vain suorakaiteen muotoinen elementti, jolla ei ole minkäänlaista syvyyttä.

Tämä kynä eristää clip-path osa animaatiosta nähdäksesi, mitä se tekee:

Viimeinen kosketus on siirtää elementtiä vastakkaiseen suuntaan käyttämällä translate - ja illuusio on täydellinen! Tässä on vaikutus käyttämällä erilaisia ​​mukautettuja ominaisuusarvoja eri syvyyksille:

Toinen leijuva vaikutus noudattaa samaa rakennetta. Tein vain muutaman arvon päivittämisen luodakseni ylävasemman liikkeen oikean yläkulman sijaan.

Yhdistele efektejä!

Mahtava asia kaikessa, mitä olemme käsitelleet, on, että ne kaikki täydentävät toisiaan. Tässä on esimerkki, johon lisään Ishayoiden opettaman text-shadow vaikutus toisesta artikkelista sarjassa background animaatiotekniikka ensimmäisestä artikkelista kun käytimme 3D-temppua, jonka juuri käsittelimme:

Varsinainen koodi saattaa olla aluksi hämmentävää, mutta jatka ja analysoi sitä hieman pidemmälle – huomaat, että se on vain yhdistelmä noista kolmesta eri tehosteesta, jotka ovat melkoisesti sekoitettuja yhteen.

Haluan lopettaa tämän artikkelin viimeisellä hover-tehosteella, jossa yhdistän taustan, leikepolun ja ripauksen perspective simuloidaksesi toista 3D-tehostetta:

Käytin samaa tehostetta kuviin ja tulos oli varsin hyvä 3D:n simulointiin yhdellä elementillä:

Haluatko katsoa tarkemmin, kuinka tuo viimeisin demo toimii? Kirjoitin siihen jotain.

Käärimistä

Oho, olemme valmiita! Tiedän, se on paljon hankalaa CSS:ää, mutta (1) olemme oikealla verkkosivustolla sellaisiin asioihin, ja (2) tavoitteena on viedä ymmärryksemme erilaisista CSS-ominaisuuksista uudelle tasolle antamalla niiden olla vuorovaikutuksessa yksi toinen.

Saatat kysyä, mikä on seuraava askel täältä nyt, kun lopetamme tämän pienen sarjan kehittyneitä CSS-hover-tehosteita. Sanoisin, että seuraava askel on ottaa kaikki oppimamme ja soveltaa niitä muihin elementteihin, kuten painikkeisiin, valikkokohtiin, linkkeihin jne. Pidimme asiat melko yksinkertaisina sikäli kuin rajoittimme temppumme otsikkoelementtiin juuri tästä syystä ; varsinaisella elementillä ei ole väliä. Ota käsitteet ja juokse niiden kanssa luomaan, kokeilemaan ja oppimaan uusia asioita!

---

Hienoja CSS-hover-tehosteita, jotka käyttävät taustaleikkausta, naamioita ja 3D:tä alun perin julkaistu CSS-temppuja. Sinun pitäisi hanki uutiskirje.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://css-tricks.com/css-hover-effects-background-masks-3d/