10 CSS könyvtár a jobb képáttételre
A felhasználók kiadása könnyen és világosan tudhatja, hogy a weboldal melyik része kattintható fontos része az UX tervezésnek. A régi, de arany módja a szöveg színének megváltoztatása és aláhúzása volt. Napjainkban, a CSS-nél, rengeteg lehetőség van a lebegő hatások, különösen a képek megjelenítésére.
A fejlesztők most már átmeneti effektusokat vagy animációt adhat hozzá, ha egy lebegő esemény bekapcsol. Az irányított tárgylemezeket nézzük, különböző sebességekkel, fade-in és fade-out-okkal, hingeffektusokkal, reflektorfényekkel, hullámzásokkal, pattogásokkal és több.
Ebben a összeállításban vannak több mint 250 lebegőhatás hogy inspirálja Önt. A kódot a forrásnál is fel lehet venni.
Image Hover Effects (16 hatás)
Ezen az oldalon 16 hover kép effektusok gyűjteményét találja a feliratokkal. Fogja meg a HTML és CSS kódot minden egyes effekthez a képek fölé húzva, majd a gombra kattintva Kód megjelenítése.
Képfelirat Hover animáció (4 hatás)
Íme 4 hűvös felirat animáció, ami akkor fut, amikor a kép fölé mozog. A hatások tiszta CSS3 átmenetekkel és átalakítással, és nem JavaScript használatával épülnek fel a böngésző kompatibilitásának növelése érdekében.
iHover (35 hatás)
Az iHover a CSS3 által táplált lebegő hatások gyűjteménye. 20 körhatás és 15 négyzet alakú lebegő hatás van. A hatások használatához HTML-jelölést kell írni, és be kell illesztenie a CSS-fájlokat.
Kép Hover (44 hatás)
Ez a könyvtár 44 effektust tartalmaz tiszta CSS-sel. A hatások némelyike többek között az elhalványulások, tolások, csúszdák, zsanérok, felfedések, nagyítások, elmosódások, elfordulások, redők és redőnyök, több irányban. Van egy 216-os kibővített változat, amelyet 14 euróért lehet megvásárolni.
Hover Effect ötletek (30 hatás)
Ez a kép a Codrop által készített bemutatót inspirálja, amikor sima átmenetet végez a képek és a feliratok között. Összesen 30 effektus van két oktatói és forráskóddal.
Hover CSS (108 hatás)
A Hover CSS lehetővé teszi, hogy bármely elemhez, például egy gombhoz, linkhez vagy képhez hozzon létre hover effektust. A hatások közé tartoznak a 2D átmenetek, a háttérátmenetek, a határ, a Shadow és a Glow átmenetek, és így tovább. A könyvtár elérhető a CSS, Sass és LESS programokban.
Animatism (100+ hatás)
Több, mint 100 kép-mozgó animáció van a gombok, a fedvények, a részletek, a feliratok, a képek és a szociális média gombok között. Minden effektust a CSS3 hajt.
Felirat Hover Effect (7 hatás)
A gyűjteményben 7 különböző hatás van. Minden átmenet nagyon szép és sima. Keresse meg a bemutató részt, hogy megtudja, hogyan alkalmazhatja ezeket a hatásokat a projektre.
CSS Image Hover Effects (15 hatás)
Egyszerű lebegő hatások gyűjteménye, mint pl. Zoom, dia, forgatás, szürke skála, elmosódás, opacitás és egyéb alapvető hatások. Ezeket a hatásokat a CSS osztály hozzáadásával használhatja ábra címke.
Iránytudatos 3D hover hatás
Ez egy szuper hűvös hatás, amely észleli az utolsó egérmozgást. A képfeliratok az utolsó kurzor pozíción alapuló négy irányból indulnak ki.
Hover animáció
Itt van egy UNIQLO által ihletett határfelkelő animáció. Egy lebegő esemény esetén a kép határa animált lesz.
Csempék Animált Lebegővel
Az egyik a csempe mintákhoz, ez a lassú zoom, a diák, a pop-inek, a halvány átfedés többek között.
SVG klip-Path Hover Effect
Egy szuper félelmetes röntgensugárzási kép az SVG által táplált clip-path és CSS átmenetek. Jól működik a Chrome, az Opera és a Safari.
