A Hover Animáció használata a webdesignban
Szín Lebeg
Az Elem színének lebegtetésre állítása segít a látogatók figyelmét egy elemre összpontosítani, és benyomást és fogalmat kölcsönöz a jelentésének kívánt elképzeléséről. Megváltoztathatja az elem színét az egérmutatóval. Ehhez válasszon ki egy elemet, és a Tulajdonságok panelen lépjen az Animáció bekapcsolva szakaszba, kattintson a Lebegtetés hivatkozásra, majd a Lebegtetés jelölőnégyzetre. Módosítsa a színt, hogy az egérmutatót rávegye.
Border On Hover
Az Element Border azért is fontos, hogy javítsa az Elements interakcióját és felhívja a látogatók figyelmét. Módosíthatja a lebegési szegélyt olyan elemeknél, mint az ikon, kép, alakzat, csoport, rács stb. A Tulajdonságok panel Lebegés szakaszában jelölje be a Lebegés jelölőnégyzetet. Módosítsa a szegélyt, hogy az elem lebegtetése közben megjelenjen.
Lebegő sugár
A képek és alakzatok, csoportok és rácscellák esetében módosíthatja a sugarat a lebegtetéskor. Az elemek vonzóvá válnak ezzel a tulajdonsággal, cselekvésre késztetnek (Vásárlás most, További információ gombok stb.), és egyedivé teszik a dizájnt. A Tulajdonság panel Lebegés részében engedélyezze a Lebegés módot. Húzza el a Sugár csúszkát az On Hover értékének beállításához.
Shadow On Hover
Módosíthatja az Árnyék tulajdonságot a Szövegekhez és más elemekhez a Hoveren. A Shadow on Hover beállításához adjon hozzá vagy válasszon ki egy elemet. Ezután kattintson a Property Panel Hover hivatkozására, jelölje be a Lebegtetés jelölőnégyzetet, módosítsa a Lebegtetésre alkalmazandó árnyékot. Kezdheti az egyik árnyék-előbeállítással, és szükség esetén testreszabhatja.
Átlátszóság lebegve
Módosíthatja az Elemek átlátszóságát a Hoveren, hogy interakciót és vonzóbbá tegye a webhely kialakítását. A Tulajdonság panelen kattintson a Lebegtetés hivatkozásra, és jelölje be a Lebegtetés jelölőnégyzetet. Állítsa be az átlátszóságot, amely a lebegtetésre alkalmazandó. Kattintson valahova a blokkban az elem kijelölésének megszüntetéséhez. Vigye az egérmutatót az elemre az átlátszóság változásának teszteléséhez.
Move On Hover
A modern webhelyeken használt Hover Animation Effects kifinomultabbá vált. Az egyik hatáspélda az Element Move on Hover. Hozzáadhatja az elem mozgatását a lebegtetésen. Adjon hozzá vagy válasszon egy elemet, és lépjen a Tulajdonság panelre. Kattintson a Lebegtetés hivatkozásra, majd jelölje be a Lebegtetés jelölőnégyzetet. Állítsa be a Move X, Y tulajdonság értékeit.
Lebegő forgás
A Rotation on Hover a következő fontos és összetett hatás. Egy elem elforgatásához adjon hozzá vagy válasszon ki egy elemet, és lépjen a Tulajdonságok panelre. Nyissa meg és kattintson a Lebegés hivatkozásra az Animáció bekapcsolva részben, majd jelölje be a Lebegtetés jelölőnégyzetet. A csúszkával állítsa be az elforgatási szöget, vagy írja be az értéket a beviteli mezőbe. Az elforgatási szög támogatott értékei 0 és 359 között vannak.
Scale On Hover
A méretezés a kurzor legtermészetesebb reakciójának tűnhet. Ezért nagyon népszerű lehet. Könnyedén hozzáadhatja webhelyéhez a Scale On Hover funkciót. Ehhez adjon hozzá vagy válasszon ki egy elemet, majd lépjen a Tulajdonság panelre. Kattintson a Lebegtetés hivatkozásra az Animáció bekapcsolva szakaszban, és jelölje be a Lebegtetés jelölőnégyzetet. Görgessen le a Méretezés, Forgatás és Mozgatás tulajdonságokhoz. A tényleges méret 100.
Lebegtetés időtartama
A lebegő animációt az időtartam beállításával kezelheti. Állítsa be az animáció időtartamát az egérmutatóval adjon hozzá vagy válasszon ki egy elemet, és lépjen a Tulajdonságok panelre. Válassza az Animáció bekapcsolva szakasz Lebegés hivatkozását, és jelölje be a Lebegtetés jelölőnégyzetet. A Slider támogatott értékei 10 és 200 között vannak, és szükség esetén nagyobb számot is beírhat ebbe a mezőbe.
Háttérszín Színátmenethez Lebegve
Ha hozzáadja a Lebegő animációt egy háttérrel rendelkező alakzathoz, érdemes lehet a tömör kitöltést valami vonzóra, például színátmenetre módosítani. Ehhez válasszon ki egy alakzatot, és lépjen a Tulajdonságpanel Lebegő hivatkozásra. Kattintson az Animáció bekapcsolva -> Lebegtetés hivatkozásra, és jelölje be a Lebegtetés jelölőnégyzetet. Válassza ki a színátmenet típusát a háttérhez, és állítsa be a színátmenetet.
Háttérkép Képre Lebegve
A Kitöltés képekre is módosítható, sőt az egyik Háttérképet egy másikra cserélheti lebegtetés közben, ami nagymértékben szórakoztathatja a látogatókat. Válasszon egy alakzatot, és adjon hozzá egy képet a háttérhez. Lépjen a Tulajdonság panel Animáció bekapcsolva részéhez, és kattintson a Hover gombra. Engedélyezze a Lebegés effektust, és válassza ki a Képet háttértípusként. Válassza ki a Lebegő képet. Teszt.