Hogyan készítsünk egy szép menü animáció, ha lebeg a tiszta CSS3
Szia kedves blog olvasók. Ma megtanuljuk, hogy nem elég sok a menüt a fejléc, és egy elég jó és vonzó hatása hover.
Azt szeretném mondani, rögtön, hogy tényleg kicsi mérete menüt, és nem alkalmas az összes honlapok és nem minden design. Úgy látszik, inkább a minimalista design. Bár sok, ha nem tudja szerkeszteni a stílust, akkor nastoroit bármilyen website design.
Ebben a bejegyzésben lehet letölteni a forráskódot navigáció, valamint látni működés közben, hogy egy példa.
Emlékeztetem Önöket, hogy ezt a leckét megosztott velünk helyszínen designfestival.com. amiért nagyon köszönöm.
Nos, most menjünk közvetlenül a létesítmény.
Példa ι Letöltés forrásokból
Ezt a kódot kell beilleszteni a hely, ahová a menü megjelenítéséhez:
Mint látható, itt is címkézni
- kérték fő-ul class, amely a jövőben fogják használni a stílusokat.
Most térjünk rá a CSS stílusokat.
Kezdeni bárhol a CSS stílus, add meg ezt:
Tehát távolítsa el az alapértelmezett stílus címkék ol és ul.
Most kell terjeszteni magát a listát a weboldalon. Vagy más szóval, adja meg a helyzetét. Ez történik az alábbiak szerint.
Sima animáció (átmenet)
De most ezt fogjuk tenni a nagyon kialakítása a menüben. Itt fogjuk használni CSS3 animációk (átmeneti), amely a későbbiekben lehetővé teszi számunkra, hogy egy ilyen szép sima hover hatással van rájuk. Itt a kód:
animáció sebessége ér 1 másodperc. Kérésre meg lehet változtatni.
Most arra van szükség, hogy a méretet, stílust és a betűtípus is. Természetesen meg lehet változtatni őket egyedül, ha van egy standard méretű nem teljesülnek:
Csak itt, akkor meg egy másik színt a link, ha lebeg. Ő a megállapodás alapján tag lebeg, #fff alapszín (fehér).
Animation (transzformáció) és a színes hover
Tehát itt az ideje, hogy adjunk Étlapunkon hatás (mint oly nevezni :-)) nem egy nagy fordulópont. Mi fogja ezt a segítségével CSS átalakítani. És itt mi külön-külön a linket egy másik színt, ha mozog:
Mint látható, a szín kiállítva a háttér színét. A forgatás mértékét is: transzformáció: forgatni (-3deg); Ez az érték lehet változtatni.
Következő gyakorlatilag ugyanaz CSS kód csak nem sok megváltozott osztály és a szín a háttér színét.
Példa ι Letöltés forrásokból
Kiderült, elég, nem rossz menü, amely használható bármely oldalon. -)