Homepage » Toolkit » 10 CSS könyvtár a jobb képáttételre

    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.