10 Knjižnice CSS za boljše učinke hover slike
Dajanje uporabnikov v najem enostavno in jasno vedeti, kateri del spletne strani je mogoče klikniti je pomemben del oblikovanja UX. Stari, a zlati način je bil spremeniti barvo besedila in jo poudariti. Danes, s CSS, obstaja veliko več načinov za zagotavljanje hover učinke, zlasti na slike.
Razvijalci lahko zdaj doda učinke prehoda ali animacijo, ko se sproži hover dogodek. Iščemo usmerjevalne diapozitive, povečujemo sliko z različnimi hitrostmi, zbledelostmi in zbledelostmi, učinke tečajev, osvetlitev, nihanja, odbijanje in drugo.
V tej kompilaciji so več kot 250 učinkov lebdenja da vas navdihne. Kodo lahko prevzamete tudi pri viru.
Učinki hover slike (16 učinkov)
Na tej strani boste našli lepo zbirko 16 hover efektov slik z napisi. Zgrabite kodo HTML in CSS za vsak učinek tako, da se premikate nad slikami in nato kliknete Pokaži kodo.
Animacija za naslove slike (4 učinki)
Tu so 4 kul animacije napisov, ki se izvajajo, ko se steka nad sliko. Učinki so zgrajeni s čistimi prehodi in transformacijo CSS3 ter brez JavaScripta, da bi povečali kompatibilnost preko brskalnika.
iHover (35 učinkov)
iHover je zbirka učinkov hover, ki jih poganja CSS3. Obstaja 20 učinkov kroga lebdenja in 15 kvadratnih učinkov hover. Če želite uporabiti učinke, boste morali napisati nekaj oznake HTML in vključiti datoteke CSS.
Image Hover (44 učinkov)
Ta knjižnica vsebuje 44 učinkov, ustvarjenih s čistim CSS. Nekateri učinki vključujejo bledenje, potiskanje, diapozitive, tečaje, razkritja, povečavo, zamegljenost, prezrcanje, pregibe in rolete v več smereh. Obstaja razširjena različica 216 učinkov, ki jih je mogoče kupiti za 14 EUR.
Zamisli o učinku hoverja (30 učinkov)
Ta predstavitveni prikaz slike, ki ga je ustvaril Codrop, vam daje navdih pri gladkih prehodih med slikami in njegovimi napisi. Obstaja skupaj 30 učinkov na dveh nizih z vadnicami in izvorno kodo.
Hover CSS (108 učinkov)
Hover CSS vam omogoča dodajanje učinkov hover na kateri koli element, kot je gumb, povezava ali slika. Učinki vključujejo 2D prehodi, prehodi v ozadju, meje, prehode Shadow in Glow in še več. Knjižnica je na voljo v CSS, Sass in LESS.
Animatizem (100+ učinkov)
Na gumbih, prosojnicah, podrobnostih, napisih, slikah in gumbih družabnih medijev je več kot 100 animacij za prikazovanje slik. Vse učinke poganja CSS3.
Učinek prikaza napisa (7 učinkov)
V tej zbirki je 7 različnih učinkov. Vsi prehodi izgledajo zelo lepo in gladko. Pojdite v razdelek z vadnicami in se naučite, kako uporabiti te učinke v vašem projektu.
Učinki premikanja slike CSS (15 učinkov)
Zbirka preprostih učinkov hover, kot so povečava, diapozitiv, vrtenje, siva lestvica, zamegljenost, motnost in drugi osnovni učinki. Te učinke lahko uporabite z dodajanjem razreda CSS pred svojim številka oznaka.
Smerni učinek 3D premikanja
To je super kul efekt, ki bo zaznal vaše zadnje gibanje miške. Napisi za slike se bodo odprli iz ene od štirih smeri glede na vaš zadnji položaj kurzorja.
Animacija za hover
Tukaj je animacija, ki jo navdihuje UNIQLO. Ob hover dogodku bo meja slike postala animirana.
Ploščice z animiranim hoverjem
Ena za ploščice modelov, ta ima počasen zoom, diapozitive, pop-ins, zatemnjena prekrivna med drugim.
Učinek posnetka poti SVG
Super super rentgenski reflektorji, ki jih poganja SVG clip-path in prehodi CSS. Dobro deluje za Chrome, Opera in Safari.
