Css animációs elemeket, a tervezés és fejlesztés a helyszínen
Jó napot kívánok. 🙂
Meg akarom mutatni, hogyan lehet szervezni egy animáció a CSS segítségével. Most, sok elkezdték használni az animációt, mert nem igényel egy harmadik fél szkriptek és jQuery könyvtár. Van egy hely a honlapon, a fejlécben is segítségével CSS, a bal oldalon a szöveg hagy.
Vannak sok különböző hatások és megmutatom, néhány közülük. Alkalmazza az ilyen hatások bárhol lehet az oldalon, csak a képzelet. Az első példa Idézek a webhely, és a többi kell lennie ugyanazon elv, csak a különböző stílusokat.
Szervezni az animáció, például div -blokk, akkor először regisztrálni kell a HTML-kódot a helyét a helyszínen, ahol azt szeretné, hogy az animációt.
Mint látható, rendelünk egy egységnyi id és class. Sőt, id elhelyezheti Gépkereső és az osztály - ténylegesen hatással lesz. Ezután egyszerűen írja a stílusok és kap a kész eredményt.
Először is, egyszerű stílus, a blokk elrendezés, vagyis id. Persze, meg tudod változtatni őket teljesen, hogy illeszkedjen az Ön igényeinek.
További vannak stílusok animációs osztály - slideRight.
CSS áthelyezése jobbra
2s - ezúttal az animáció. akkor azt hiszem, egyértelmű, semmi bonyolult. Létrehoztunk egy egység a neki kijelölt és hozzárendelt stílusok animációs stílusok - kész. Mint mondta, ez az animáció - a megfelelő, azaz a mozgás a blokk balról jobbra.
Van egy pár effekt, amit alkalmazni egy animáció. Az alábbiakban fogok írni a nevét, az animációk és stílusok. Számodra szerzett, mindent meg kell tenni, mint az első hatás, csak az osztály nevét rendelt rendre hatása. És így, annak érdekében, hogy:
CSS Balra
A hatás hasonló az elsőhöz, csak ezúttal a mozgás jobbról - balra.
CSS Mozgatás lefelé
Ugyanez a hatás a lefelé irányuló mozgás.
CSS Magasabb
Mozgás történik alulról felfelé
CSS felfelé mozgás és bővítése
Element emelkedik alulról felfelé, és hasonló lesz tömörítve oldalán, miután emelve drámaian kitágul és a szokásos megjelenésű.
CSS lefelé irányuló mozgás és bővítése
Ugyanez a hatás, mint az előző, csak a mozgást fentről lefelé.
CSS animáció megjelenése növekedése
Element derül ki a központ, és növeli a normál méretű
CSS animáció megjelenése csökkentés
Element derül ki a központ, és növeli a normál méretű
CSS animáció megjelenése lazaság
Element kiemelkedik a központtól növekszik, míg lengő, mint egy libikóka.
CSS animáció swing
Az elem csak lengő, mint egy hinta teljesen megáll
CSS-animációk ugrál csepp
Element emelkedik és esik meredeken lefelé
CSS nélkül szakaszos fodrozódás
Element folyamatosan lüktető megállás nélkül.
CSS mozgás felfelé és lefelé
Element mozog fel és le megállás nélkül.
CSS swing megállás nélkül
Element leng, mint a swing megállás nélkül
CSS animáció növekedés
Element fokozatosan növekszik a teljes méretű alulról felfelé
CSS magassága fentről lefelé
Ugyanez a hatás, mint az előző, csak a növekedési lefelé
CSS növekedés jobbról balra
Element növekszik jobbról balra
CSS növekedés balról jobbra
Ugyanez a hatás, mint az előző, hanem éppen ellenkezőleg, balról jobbra.
Itt például itt hűvös hatást akkor használja a webhelyen. Próbálja ki, és melyik a legmegfelelőbb az Ön számára. A lényeg, hogy rendelni egy osztály, hogy működik! Minden stílus egyetlen fájlban tölthető le az alábbi gombra kattintva
Tud-e csatlakozni egy ilyen fájlt, és a különböző elemek, hogy különböző osztályok és különböző animációk. Általában használjunk, amit akarsz, a lényeg, és jobbra, a lényeg 🙂
Használja CSS-animációk a webhelyen?
Ez minden, köszönöm a figyelmet. 🙂
hogy nem hover'a én felírni, itt van a blokk:
portfolió-description animáció-name: portfolió-összetétel;
-WebKit-animáció-name: portfolió-összetétel;
animáció-időtartam: 0.5s;
-WebKit-animáció-időtartama: 0.5s;
animáció-időzítés-funkció: könnyű ki-be;
-WebKit-animáció-időzítés-funkció: könnyű ki-be;
láthatóság: Csak fontos ;!
>
és ha lebeg jól működik. de amikor a kurzor csapok nélkül - animáció. és lebeg, ahol én nem értem, hogy farag
Szia kedves barátom
Van AdBlock telepített bővítmény vagy hasonlók. Add oldalamon a fehér listát, és így vnesesh hozzájárulnak kialakulásához. Arról, hogy hogyan tiltsa AdBlock szeretné ezt az ablakot