Share
Există câteva exemple uimitoare de transformări și tranziții CSS și, în timp ce este posibil să fiți sufocați de ei, există șanse mari să fiți copleșiți și puțin intimidați! Acest tutorial vă va duce înapoi la elementele de bază. Vom crea câteva mișcări de tranziție CSS3 fundamentale, pas cu pas.
Suportul în cadrul browserelor este deja destul de rezonabil. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1 și Internet Explorer 9.0 te-ai referit la transformări. IE este puțin mai adaptabil în ceea ce privește tranzițiile, deși este prevăzut sprijin pentru IE10.
Pentru a ajuta la înțelegerea mișcării, vom lucra cu ușurință pe o rețea de axe (pe care o veți recunoaște probabil din matematica de bază). Vom folosi X și y coordonate pentru a muta obiectele noastre.
Singura diferență (crucială) este că pe axa noastră valoarea -y este de mai sus axa x, în timp ce aceasta ar fi în mod normal sub ea. De ce? Ei bine, HTML și CSS (împreună cu alte tehnologii web, cum ar fi ActionScript) folosesc un inversat Sistemul de coordonate cartezian, deoarece paginile web încep de la stânga sus și se citesc în jos. Deci acum știi :)
Notă: Voi presupune că deja cunoașteți structura de fișiere HTML și CSS. Voi trece prin a explica cum să configurați fișierul CSS, să plasați imagini și să modelați Axa. Accentul nostru se va pune pe animarea obiectelor. Dacă nu sunteți încrezător că abilitățile HTML + CSS sunt de până la zero, aruncați o privire la noul Tuts + Premium HTML & CSS în 30 de zile (care este gratuit) și veți învăța tot ce trebuie să știți.
Prima mișcare pe care o vom demonstra este "orizontală"; vom anima obiectul pentru a vă deplasa spre dreapta și spre stânga.
Pentru a muta un obiect din poziția sa inițială, folosim: transformă: traduce (x, y);, unde valoarea x ar trebui să fie pozitivă, iar valoarea y ar trebui să fie 0 pentru a muta obiectul spre dreapta.
Deschideți editorul text preferat și introduceți următoarea marcaj html, apoi salvați fișierul.
Am atribuit trei clase imaginii:
În primul rând, vom plasa obiectul (imaginea van) în centrul grilajului.
.obiect poziție: absolută; .van sus: 45%; stânga: 44%;
În acest exemplu vom muta obiectul 350px spre dreapta. Sintaxa este transformă: traduce (350px, 0); și obiectul se va mișca atunci când Axa este plutind. Prin urmare, declarăm acest lucru #axis: hover .move-right.
#axis: hover .move-right transform: traducere (350px, 0); -webkit-transform: traduce (350px, 0); / ** Chrome & Safari ** / -o-transform: traduceți (350px, 0); / ** Opera ** / -moz-transform: traduce (350px, 0); / ** Firefox ** /
Proprietatea transformă CSS va muta numai obiectul de la un punct la altul, nu va anima între cele două stări. Pentru a face acest lucru, trebuie să adăugăm o proprietate de tranziție în clasa .object.
.obiect poziție: absolută; tranziție: ușurință în ușă; -webkit-transition: toate 2s ease-in-out; / ** Chrome & Safari ** / -moz-tranziție: toate 2s easy-in-out; / ** Firefox ** / -o-tranziție: toate 2s easy-in-out; / ** Opera ** /
Această regulă de tranziție va spune browserului să animeze toate proprietățile atașate la obiect pentru 2 secunde folosind un ușurința în-out (tween), fără întârziere.
Putem folosi 6 tipuri de funcții de tranziție-temporizare:
Pentru a muta un obiect spre stânga, este suficient să introduceți o valoare negativă în X coordonare, în timp ce y trebuie să rămână coordonatele 0. În acest exemplu vom muta obiectul -350px la stanga.
Creați un alt fișier HTML și introduceți următorul marcaj.
De data aceasta folosim mută la stânga pentru a seta regula CSS pentru mutarea obiectului în stânga.
Apoi, introducem -350px ca coordonată x. transformă: traduce (-350px, 0); pentru a muta obiectul spre stânga. Destul de ușor, corect?
#axis: hover .move-stânga transform: traduce (-350px, 0); -webkit-transform: traduce (-350px, 0); / ** Safari & Chrome ** / -o-transform: traduce (-350px, 0); / ** Opera ** / -moz-transform: traduce (-350px, 0); / ** Firefox ** /
Deoarece am stabilit anterior regula de tranziție în clasa .object, nu trebuie să o setăm din nou.
Mutarea unui obiect pe verticală este destul de ușoară, aproape identică cu mișcarea orizontală. Singura diferență este că vom folosi valoarea -y pentru a muta obiectul în sus și valoarea y pentru a vă deplasa în jos.
Marcajul HTML este identic cu cele două exemple anterioare. Cu toate acestea, înlocuim obiectul cu o rachetă (pentru scopuri ilustrative), iar clasa pe care o folosim pentru mișcarea ascendentă este muta-up.
Ca și cu vanul nostru, vom poziționa racheta în centrul grilajului:
.racheta top: 43%; stânga: 44%;
După cum am menționat mai înainte, coordonatele y ar trebui să fie negative, pentru a muta racheta în sus. în acest caz îl mutăm cu 350 de pixeli în sus.
#axis: hover .move-up transform: traducere (0, -350px); -webkit-transform: traduce (0, -350px); -o-transform: traduce (0, -350px); -moz-transform: traduce (0, -350px);
Metoda de mutare a unui obiect în jos este (surpriză, surpriză) opusul deplasării în sus; valoarea coordonatei y trebuie să fie pozitivă, iar coordonata x ar trebui să rămână 0. Sintaxa este transform: traduce (0, y);
În acest exemplu, vom demonstra deplasarea în jos folosind o monedă. Geniu!
#axis: hover .move-down transform: traduce (0,350px); -webkit-transform: traduce (0,350px); -o-transform: traduce (0,350px); -moz-transform: traduce (0,350px);
Pentru a crea o tranziție diagonală, vom combina valorile ambelor coordonate X și y. Sintaxa ar trebui să fie transforma: traduce (x, y). În funcție de direcție, valoarea lui X și y ar putea fi negativă sau pozitivă.
Și pentru a ne demonstra mișcarea diagonală, vom folosi un avion de hârtie.
Vom direcționa spre nord-est. Pentru X valoarea de coordonate introduce o valoare pozitivă (350px) și pentru y coordonate vom introduce o valoare negativă (-350px). Astfel, sintaxa va arăta astfel: transforma: traduce (350px, -350px);
#axis: hover .move-ne transform: traduceți (350px, -350px); -webkit-transform: traduce (350px, -350px); -o-transform: traduce (350px, -350px); -moz-transform: traduce (350px, -350px);
Simțiți-vă liber să experimentați și să direcționați mișcarea obiectelor de-a lungul celorlalte axe diagonale.
Mișcarea rotativă în CSS3 este reglată folosind o coordonată radială de la 0 ° la 360 °. Pentru a roti un obiect aplicați pur și simplu următoarea proprietate css: transform: roti (ndeg); Unde n este gradul de rotație.
Pentru a roti un obiect în sensul acelor de ceasornic, introduceți o valoare pozitivă pentru rotate (ndeg) proprietate.
Pentru acest exemplu vom folosi un creion pentru a demonstra mișcarea.
Și vom roti obiectul în 360 de grade în sensul acelor de ceasornic.
#axis: hover .rotate360cw transform: rotire (360deg); -webkit-transform: roti (360deg); -o-transform: roti (360deg); -moz-transform: roti (360deg);
Pentru a efectua rotația în sensul invers acelor de ceasornic, introduceți (ați ghicit-o) o valoare negativă.
Încă mai folosim creionul ca obiect, dar vom schimba clasa la .rotate360ccw.
#axis: hover .rotate360ccw transform: rotire (-360deg); -webkit-transform: rotire (-360deg); -o-transform: rotire (-360deg); -moz-transform: rotiți (-360deg);
Scala este o caracteristică interesantă în CSS3. Utilizând proprietatea scară (n) sau scară (x, y) putem mări sau micșora un obiect în cadrul codului nostru HTML. Obiectul va fi scalat în funcție de valoarea n / x, y, unde axa x este pentru lățime, iar axa y reprezintă înălțimea. De exemplu, dacă introducem scara (2), obiectul va fi scalat de două ori (cu 200% mai mare) de-a lungul ambelor axe, de la dimensiunea sa inițială.
Să aruncăm o privire la exemplul de mai jos.
În acest exemplu, vom mări dimensiunea mașinii cu 200%, dând iluzia că mașina se apropie (sperăm).
Din nou, marcajul HTML abia a fost modificat, dar de data aceasta folosim o mașină ca obiect.
#axis: hover .larger transform: scară (2); -webkit-transform: scara (2); -o-transform: scară (2); -moz-transform: scară (2);
După ce am jucat cu mișcări de bază și se transformă, vom încerca acum să combinăm unele dintre ele. Hai să aruncăm o privire.
De data aceasta, vom folosi un bumerang pentru a demonstra animația.
Planul este de a muta bumerangul în diagonală, în timp ce efectuați rotații în același timp. Pentru a face acest lucru, trebuie doar să enumerăm transformările separate de spații.
#axis: hover .multiple transform: traduceți (350px, -350px) rotiți (360deg); -webkit-transform: traduceți (350px, -350px) rotiți (360deg); -o-transform: traduceți (350px, -350px) rotiți (360deg); -moz-transform: traduceți (350px, -350px) rotiți (360deg);
Acestea sunt exemple de bază și există o sferă uriașă de dezvoltare a acestora în continuare! Amintiți-vă: luați în considerare suportul browserului atunci când folosiți proprietățile CSS3 și nu vă faceți griji cu aceste efecte - ar trebui să vă îmbunătățiți designul, să nu îl înecați!
Pentru mai multă inspirație, aruncăm o privire asupra unor animații și efecte cool CSS3 pe Envato Market. Iată câteva exemple:
Aceste tranziții superbe, subtile și utile CSS3 flip, fade și strălucirea vă ajută să extindeți proprietățile imobiliare ale unui site și să utilizați spațiul mai eficient. Orice conținut, în totalitate, inclusiv videoclipuri, hărți, imagini etc., poate fi rotit (sau decolorat).
Friendly Flip 'n' Fade pe piața EnvatoAcesta este un utilitar bazat pe CSS / jQuery, care vă va permite să creați un efect neobișnuit de fundal pentru cerul de noapte animat pentru site-ul dvs..
Fundal animat pe cerul nocturn pe piața EnvatoAcesta este un set de animații Pure CSS3 Loader. Aceste efecte animate CSS3 de 15+ sunt compatibile cu toate browserele majore.
Pure animatoare CSS3 Loader pe Envato MarketAceasta este o colecție de cinci subtitrări animate CSS animate. Acest kit oferă câteva efecte deosebite și vă va economisi mult timp atunci când creați site-uri web.
tFigure - Subtitrări imagine pe Envato MarketAcest element vă permite să vă creați propria rețea de mozaic cu ajutorul aplicației dvs. sociale pentru personal și mai mult. Acesta include 28 de icoane sociale și o gamă de configurații diferite de rețea.
Zidul mozaic social pe piața Envato
Accentsconagua
