Dinamični CSS: preoblikovanje predmetov

Animacija elementov strani lahko deluje kot samostojen proces ali se lahko izvede za vizualno prikazovanje dejanj obiskovalcev. V vsakem primeru preoblikovanje elementa CSS ne vpliva na celoten pretok in se izvaja ne glede na vsebino strani kot celote.

Pri uporabi pravil in razvijanju logike za spreminjanje elementov je zelo pomembno, da uporabimo prave vrednosti lastnosti in pravil. Preoblikovanje CSS razvijalcu ne nudi zmožnosti upravljanja. Vse transformacije se izvajajo glede na dane funkcije in njihove vrednosti.

Splošna pravila preoblikovanja

Logika, realizirana v zamisli o transformacijski funkciji, je izkrivljanje elementa. Elementi strani so pravokotne površine, čeprav so v njej prikazane gladke grafike.

S spreminjanjem dimenzij obeh strani območja ali njihovega premika (premika) je lahko:

• dinamika se oblikuje;
• možnost se oblikuje;
• prostornina je izpolnjena.

V vsakem primeru se vse preobrazbe pojavijo na ravnini, rezultat pa je možen tako pri 2D kot pri 3D-kartiranju.

Naslednji primer prikazuje štiri področja, vsaka s preoblikovanjem CSS.

Zgornja vrstica slik je izvirna, spodnja vrstica je rezultat uporabe funkcij. Za prikaz glavnih funkcij, ki so uporabili naslednji opis CSS in prikazuje vstavitev v HTML strani.

V tem primeru se preobrazba zgodi, ko miško premaknete nad element in ga dodelite s pseudo-class levo.

Kar zadeva lastnost transformacije pri uporabi funkcije prevajanja, je treba opozoriti, da lahko transformacijo CSS zamenjamo z levimi in najvišjimi lastnostmi. V zvezi z izkrivljanjem iz funkcijske skewe - rezultat morda ni predvidljiv.

Verjamejo, da se le-ta redko uporablja, vendar s pravilno in kompleksno aplikacijo CSS-animacija z drsenjem omogoči dinamiko zgraditi v tridimenzionalnem prostoru, ko se element premakne. Na primer, "vesoljska plovila v orbiti" v okviru spletne strani so lahko pretok blaga preko prodajalne v trgovinskem prostoru.

Perspektiva v transformaciji

Preoblikovanje besedila v CSS lahko daje poseben učinek pri uporabi perspektive. Primer prikazuje, kako se lahko normalna predstavitev besedila spremeni v psevdo-3D besedilo.

Morda je to v nekaterih težavah smiselno, toda praktična nasprotna ideja je očitna: podatke lahko postavite v perspektivo, miška pa se premika na normalni prikaz. Je kompakten in učinkovit.

Ti primeri preoblikovanja so opisani v CSS na naslednji način:

Uporaba lastnosti transformacijskega izvora vam omogoča, da določite točko, na kateri bo preoblikovanje potekalo. Če premaknete to točko, lahko nadzorujete središče, glede na katerega se izvede pretvorba CSS.

Funkcija vrtenja ima dve možnosti - rotateX in rotateY - vendar brez "X" in "Y" ima en parameter.

V vseh primerih je treba preoblikovanje elementov odpraviti na preprostih primerih, da bi se izognili nepričakovanemu rezultatu. Bolje je najprej pravilno oblikovati pravilo in opisati lastnost za preprost element, kot pa takoj vključiti v spekter želenih transformacij. Pravilna formulacija pravil in lastnosti v CSS je ključ do uspeha in učinkovitih rezultatov.

Uporaba lastnosti animacije

CSS animacija prek animacije in @keyframes dopolnjuje možnosti preoblikovanja, kar omogoča, da se ga spremeni v pravo zastopanost skozi nadzorovano gibanje elementa ali nadzorovano preoblikovanje njegove oblike.

Zgornja linija elementov je njihovo normalno stanje. Prvi stolpec se premakne, drugi stolpec se vrti in lestvice tretjega stolpca. Prikazanih je nekaj okvirjev. Za izvajanje te funkcije se uporablja naslednja koda:

Dinamiko in trajanje postopka lahko nastavimo v animaciji in @keyframes. Na voljo je postopna in postopna sprememba procesa. Enotne spremembe in gibanje lahko pospešite s pospeševanjem.

Lastnosti animacije

Lastnost animacije je običajno napisana v eni vrstici. Vključuje osem parametrov:

• ime animacije - ime animacije;
• animacija-trajanje - trajanje animacije (sekunde "s", milisekunde "ms");
• animacija-časovna funkcija - vrsta animacije (enostavna, linearna, enostavna, enostavna, lahkoten-v-out, kubični-bezier);
• animacija-iteration-count-število ponovitev animacije ali neskončno;
• animacija-smer - smer gibanja (normalno, vzvratno, izmenično, izmenično-vzvratno);
• animacija-igra-stanje - animacija zaustavljanja (teče, zaustavljena);
• zakasnitev animacije - zakasnitev animacije pred začetkom predvajanja (sekunde "s", milisekunde "ms");
• animacijski-polnilni način - predvajanje animacije zunaj določenega časa predvajanja (
• noben, naprej, nazaj, oba);

Ko razvijete animacijo z animacijo, so lastnosti preoblikovanja podane v pravilu @keyframes, ki v korakih definira zaporedje preoblikovanja elementa.

Pomembne možnosti animacije

Vsaka animacija ima ime, trajanje in vrsto. Ime definira zahtevani opis @keyframes, dolžina pa določa čas postopka, vrsta pa podaja različico gibanja.

Če je potreben enoten postopek (gibanje in / ali preoblikovanje), se uporablja linearna vrednost. Če želite pospešiti na začetku - enostavno, če na koncu - enostavno. Preprosto lahkotnost je drsna in lahkotna zunaj je njegova lažja različica.

Vrednost cubic-bezierja vam omogoča, da oblikujete zapleteno različico gibanja in ustvarite bolj izvirno različico animacije.

Na spletni strani proizvajalca lahko izberete katero koli običajno prometno možnost in oblikujete svoje. Ko kliknete gumb "GO!", Se bosta vzporedno gibala dva kvadrata in lahko primerjate razlike in vizualno oblikujete želeno vedenje elementa.

Okvirji zgradbe animacije

Lastnost @keyframes je "determinant" okvirov (glej zgornji primer), s katerim se element spremeni. Ideja o premoženju je zelo preprosta, vendar ponuja izjemne priložnosti.

Postopek se začne pri 0% in se konča pri 100% celotnega časa, dodeljenega animaciji. Uporabljate lahko le 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 / preoblikovanja v odseke. Korak spletnega mesta je lahko katerikoli.

Običajno se sprejme več možnosti: 0%, 25%, 50%, 75% in 100%. Včasih je dovolj samo trije okvirji: 0%, 50% in 100%. Kako ravnati v vsakem primeru, je odvisno od naloge in razvijalca.

Pri izdelavi katere koli različice preoblikovanja je treba upoštevati eno pomembno pravilo. Zmeraj ni mogoče uporabljati jаvascript, zlasti za programsko spreminjanje lastnosti elementov, na primer, spreminjanje vrednosti lastnosti ozadja.

HTML, CSS in jаvascript so popolnoma združeni, 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.