Css animációs elemeket, a tervezés és fejlesztés a helyszínen

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

Kapcsolódó cikkek