10 CSS-kirjastoa parempaan kuvanvaihtovaikutukseen
Käyttäjien antaminen helposti ja selvästi tietää, mikä osa verkkosivusta on napsautettavissa on tärkeä osa UX-suunnittelua. Vanha mutta kultainen tapa tehdä se oli muuttaa tekstin väriä ja korostaa sitä. Nykyään CSS: llä on paljon enemmän tapoja tuottaa hover-vaikutuksia, erityisesti kuville.
Kehittäjät voivat nyt lisää siirtymäefektejä tai animaatioita, kun hover-tapahtuma käynnistetään. Tarkastelemme suuntaavia dioja, zoomauksia eri nopeuksilla, häipymiä ja häipymisiä, saranavaikutuksia, valonheittimiä, vaahdotuksia, pomppuja ja enemmän.
Tässä kokoelmassa on yli 250 hover-vaikutusta innostaa sinua. Voit myös noutaa koodin lähteestä.
Image Hover Effects (16 vaikutusta)
Tältä sivulta löydät mukavan kokoelman 16 hover-kuvatehosteesta, joissa on kuvatekstit. Tartu HTML-ja CSS-koodeihin jokaiselle vaikutukselle piilottamalla kuvia ja napsauttamalla Näytä koodi.
Kuvan kuvateksti Hover-animaatio (4 vaikutusta)
Tässä on 4 viileä kuvateksti-animaatiota, jotka suoritetaan, kun yksi siirtyy kuvan päälle. Tehosteet on rakennettu puhtaalla CSS3-siirtymällä ja muuntamalla, eikä JavaScript-toiminnolla, lisäävät yhteensopivuutta selaimen kautta.
iHover (35 vaikutusta)
iHover on kokoelma CSS3: n käyttämiä hoverefektejä. On 20 ympyrän hover-vaikutusta ja 15 neliön hover-vaikutusta. Jos haluat käyttää tehosteita, sinun on kirjoitettava HTML-merkintä ja sisällytettävä CSS-tiedostot.
Kuva Hover (44 vaikutusta)
Tämä kirjasto sisältää 44 puhdasta CSS: ää. Joitakin vaikutuksia ovat haalistumat, työntöt, liukumäet, saranat, paljastukset, zoomat, epätarkkuudet, kääntö, taitokset ja ikkunaluukut useissa suunnissa. On olemassa laajennettu versio 216 vaikutuksesta, jotka voidaan ostaa 14 €.
Hover Effect Ideas (30 vaikutusta)
Tämä Codropin esittämä kuva esittelee inspiraatiota, kun siirryt sujuvasti kuvien ja kuvatekstien välillä. On yhteensä 30 vaikutusta kahdelle sarjaan, joissa on opetusohjelmia ja lähdekoodia.
Hover CSS (108 vaikutusta)
Hover CSS: n avulla voit lisätä hoverefektejä mihin tahansa elementtiin, kuten painikkeeseen, linkkiin tai kuvaan. Tehosteita ovat 2D-siirtymät, taustamuutokset, raja, Shadow- ja Glow-siirtymät ja paljon muuta. Kirjasto on saatavilla CSS: ssä, Sassissa ja LESSissä.
animatismi (100+ vaikutusta)
Painikkeisiin, peittokuviin, yksityiskohtiin, kuvateksteihin, kuviin ja sosiaalisen median painikkeisiin on yli 100 kuva-himma-animaatiota. Kaikki vaikutukset toimivat CSS3: lla.
Kuvateksti Hover Effect (7 vaikutusta)
Tässä kokoelmassa on 7 eri vaikutusta. Kaikki siirtymät näyttävät todella hyviltä ja sileiltä. Siirry opetusohjelman osioon ja opi käyttämään näitä vaikutuksia projektiisi.
CSS Image Hover Effects (15 vaikutusta)
Kokoelma yksinkertaisia hoverefektejä, kuten zoomausta, liukua, kiertämistä, harmaasävyä, hämärtymistä, opasiteettia ja muita perusvaikutuksia. Voit käyttää näitä vaikutuksia lisäämällä CSS-luokan ennen kuva tag.
Suuntatietoinen 3D-hover-vaikutus
Tämä on erittäin viileä hover-vaikutus, joka havaitsee viimeisimmän hiiresi liikkeen. Kuvan kuvatekstit avautuvat yhdestä neljästä suunnasta viimeisen kohdistimen sijainnin perusteella.
Hover-animaatio
Tässä on UNIQLO: sta innoittamana rajavuoren animaatio. Hover-tapahtuman jälkeen kuvan reunus tulee animoituun.
Laatat, joissa on Animated Hover
Yksi laattojen muotoiluun, tässä on hidas zoomaus, diat, pop-ins, himmeä päällekkäisyys mm.
SVG-leike-Path Hover Effect
Erittäin mahtava x-ray-valonheitin, joka saa SVG: n clip-path ja CSS-siirtymät. Toimii hyvin Chromessa, Operassa ja Safarissa.
