Dinamični CSS: Pretvorite objekte

Animacija elementov strani lahko deluje kot neodvisen proces ali se izvaja za vizualizacijo dejanj obiskovalcev. V obeh primerih preoblikovanje elementa CSS ne vpliva na celotni tok in se izvede ne glede na vsebino strani kot celote.

Pri uporabi pravil in razvijanju logike spreminjanja elementov je uporaba pravilnih vrednosti lastnosti in pravil zelo pomembna. Preoblikovanje CSS ne daje razvijalcu zmožnosti nadzora. Vse transformacije se izvajajo glede na dane funkcije in njihove vrednosti.


Splošna pravila preoblikovanja

Logika je utelešena v ideji transformacijske funkcije, ki je izkrivljanje elementa. Elementi strani so pravokotno območje, tudi če je v njem predstavljena gladka grafika. S spreminjanjem velikosti stranic ali njihovega premika (premika) je mogoče:
  • oblikovati dinamiko;
  • nastaja perspektiva;
  • Izvedena količina.
  • V vsakem primeru se vse transformacije pojavijo na ravnini, vendar je rezultat možen v 2D in 3D prikazu. V naslednjem primeru so štiri področja, vsaka s CSS - transformacijo.
    Zgornja vrstica slik je izvirnik, spodnja vrstica je rezultat uporabe funkcij. Če želite prikazati osnovne funkcije, uporabite naslednji opis CSS in pokažite vstavljanje v HTML strani.
    V tem primeru se transformacija zgodi, ko miško nad elementom dodelite prek psevdo-razreda: hover. V zvezi ztransformacijske lastnosti pri uporabi funkcije translate, je treba opozoriti, da se lahko CSS transformacija nadomesti z levo in zgornjo lastnostjo. V zvezi z izkrivljanjem funkcije izkrivljanja - je lahko rezultat nepredvidljiv.


    Smatra se, da se poševnina redko uporablja, vendar pa je s pravilno in celovito uporabo animacije CSS s poševnostjo mogoče pri premikanju elementa zgraditi dinamiko v tridimenzionalnem prostoru. Na primer, "vesoljsko plovilo v orbiti" v okviru spletne strani je lahko pretok blaga v prodajalni v prostoru trgovin.

    Perspektiva pri preoblikovanju

    Preoblikovanje besedila v CSS lahko daje poseben učinek pri uporabi perspektive. Primer prikazuje, kako lahko normalno predstavitev besedila pretvorimo v psevdo-trihmer.
    Morda je to smiselno v nekaterih nalogah, vendar je praktičnost vzajemne zamisli očitna: informacije lahko postavite v prihodnosti in če se z miško pomaknete, da jih pretvorite v običajni prikaz. Kompaktna je in impresivna.
    Ti primeri preoblikovanja so opisani v CSS, kot sledi:
    Z uporabo lastnosti transform-origin lahko določite točko, v kateri bo izvedeno preoblikovanje. S premikanjem te točke lahko nadzorujete center, za katerega se izvaja pretvorba CSS. Funkcija vrtenja, čeprav ima dve možnosti - rotateX in rotateY - vendar brez "X" in "Y" ima en parameter.
    V vseh primerih je treba preoblikovanje elementov razvrstiti v enostavne primere, da bi se izognili nepričakovanim rezultatom. Bolje je, da najprej pravilno formulirate pravilo in opišete lastnost zapreprostega elementa, kot da se takoj vključi v obseg želenih transformacij. Pravilno besedilo pravil in lastnosti CSS je ključ do uspeha in učinkovitih rezultatov.

    Uporabi lastnosti animacije

    Animacija CSS z uporabo animacije in @keyframes dopolnjuje zmožnosti preoblikovanja, kar mu omogoča, da se pretvori v resnično predstavitev prek gibanja nadzorovanega elementa ali nadzorovane transformacije njegove oblike.
    Zgornja meja elementov je njihovo normalno stanje. Prvi stolpec se premakne, drugi se zavrti, tretji pa se poveča. Prikazanih je več okvirjev. Za izvajanje te funkcionalnosti se uporablja naslednja koda:
    Dinamika in dolžina postopka se lahko nastavita v animaciji in @keyframes. Na voljo je nemotena in postopna sprememba procesa. Pri pospeševanju lahko uporabite enotno spremembo in gibanje.

    Lastnosti lastnosti animacije

    Lastnost animacije je običajno zapisana v eni vrstici. Vsebuje osem parametrov:
  • animation-name - ime animacije;
  • trajanje animacije - trajanje animacije (v sekundah "s", milisekundah "ms");
  • Funkcija animacije-timing-vrsta - vrsta animacije (enostavnost, linearnost, enostavnost, lahkotnost, enostavnost-out-out, kubični-bezier);
  • animacija-iteracija-število - število animacij, ki se ponavljajo ali so neskončne;
  • smer animacije - smer gibanja (normalno, vzvratno, izmenično, izmenično-vzvratno);
  • animation-play-state - ustavi animacijo (teče, ustavi);
  • zakasnitev animacije - zakasnitev animacije pred predvajanjem (sekunde "s", milisekunde "ms");
  • animation-fill-mode - predvajanje animacije zunaj določenega časa predvajanja (
  • nobenega, naprej, nazaj, oboje);
  • Pri oblikovanju animacije z uporabo lastnosti animacijeTransformacije so označene v pravilu @keyframes, ki določa zaporedje preoblikovanja elementov v korakih.

    Pomembne možnosti animacije

    Vsaka animacija ima ime, trajanje in vrsto. Z imenom je definiran želen opis @keyframes, trajanje določa čas postopka, tip pa varianta gibanja.
    Če se uporablja potreba po enotnem postopku (gibanje in /ali transformacija), je vrednost linearna. Če želite imeti pospešek na začetku - poenostavite, če na koncu - lažje. Samo enostavnost je zdrsa, in enostavnost-out-je je bolj gladko možnost.
    Vrednost kubičnega-bezierja vam omogoča oblikovanje kompleksne različice gibanja in izdelavo bolj izvirne različice animacije.
    Na mestu proizvajalca lahko izberete katero koli standardno različico gibanja in oblikujete svoje. Ko kliknete gumb "GO!", Se dva kvadrata premakneta vzporedno in lahko se ujemate z razlikami in vizualizirate želeno vedenje elementa.

    Ustvarjanje okvirja animacije

    Lastnost @keyframes je "determinant" okvirjev (glej primer zgoraj), prek katerega se element spremeni. Ideja o lastnini je zelo preprosta, toda možnosti, ki jih ponuja, so ogromne. Postopek se začne pri 0% in se konča s 100% skupnega časa, dodeljenega animaciji. Uporabljate lahko samo končne točke od in do ali 0% in 100%. Večji učinek je mogoče doseči z delitvijo celotnega procesa animacije /transformacije na mestu. Velikost parcele je lahko katera koli. Običajno je sprejetih več možnosti: 0%, 25%, 50%, 75% in 100%. Včasih zadostuje samo trije okvirji: 0%, 50% in 100%. Kako narediti v vsakem primeruodvisna od naloge in razvijalca.
    Pri konstruiranju katerekoli variacije transformacije je treba upoštevati eno bistveno pravilo. Ni vedno dovoljeno uporabljati javascript, zlasti za programabilno spremembo lastnosti elementov, na primer, spremeniti vrednost lastnosti slike ozadja. HTML, CSS in javascript se odlično kombinirajo, v vseh primerih pa morate upoštevati dejansko funkcionalnost vsake od teh komponent. V idealnem primeru, ko delajo v jasni kombinaciji in ne vplivajo drug na drugega.

    Sorodne publikacije