Blogul lui Yaroslav Perelygin
Aici, așa cum este prescris:
Iată cum arată:
Puteți face și blocul, când treceți peste el, modificați lățimea, precum și culoarea de fundal și culoarea textului. Pentru aceasta, scrieți codul CSS astfel:
Iată cum va arăta în acest caz:
Totul nu ar fi nimic, dar după cum puteți vedea, proprietățile își schimbă înțelesul prea puternic, în același moment și nu arată prea frumos. Ce ar trebui să fac? Este foarte simplu: folosim proprietatea de tranziție CSS.
Pe proprietatea tranziției
Proprietatea tranziției oferă o tranziție de la un stil la altul. De exemplu, culoarea blocului când treceți peste el cu un șoarece nu se va schimba brusc, ci pentru o anumită perioadă de timp. Tranziția, apropo, în traducerea în limba rusă înseamnă "tranziție". Proprietatea are următoarea intrare:
În loc de aceste valori, puteți aplica în mod natural pe celelalte. Cele mai multe browsere încă nu percep această proprietate în forma sa standard, deci trebuie să utilizați prefixe.
În exemple, a fost specificată o variantă scurtă a înregistrării, cea detaliată fiind următoarea:
În proprietatea tranziție, este atribuită o proprietate la care se va propaga acțiunea de tranziție. De exemplu: culoarea, culoarea de fundal, lățimea, înălțimea, stânga, opacitatea, vizibilitatea și multe altele. Puteți specifica mai multe proprietăți separate prin virgule. Dacă doriți să aplicați imediat tranziția pentru toate proprietățile posibile, atunci proprietatea de tranziție ar trebui să fie setată la toate. În timpul perioadei de tranziție, timpul de tranziție va fi specificat în întârzierea de tranziție, timpul în care va începe tranziția. În funcția de tranziție-temporizare, se specifică tipul de tranziție, vom examina mai detaliat această proprietate.
Proprietatea funcției tranziție-temporizare specifică modul în care valorile intermediare se vor schimba în timpul tranziției, cu alte cuvinte, modul în care viteza de tranziție se va schimba pentru timpul specificat în proprietatea duratei de tranziție. De exemplu, tranziția poate începe rapid, dar în cele din urmă va încetini sau nu va schimba viteza pentru tot timpul. Funcția de temporizare-tranziție poate avea următoarele valori:
- liniar - viteza de tranziție nu se schimbă de la început până la sfârșit. Echivalent cu bezierul cubic (0,0,1,1).
- ușurință - pornire lentă, apoi accelerare și decelerare la sfârșit. Echivalent cu bezierul cubic (0.25.0.1.0.25.1).
- ușurința este un început lent. Echivalent cu bezierul cubic (0,42,0,1,1).
- usurare - decelerare la sfarsit. Echivalent cu bezierul cubic (0,0,0,58,1).
- easy-in-out - începe încet și finalizează. Echivalent cu cubic-bezier (0,42,0,0,58,1).
- cubic-bezier (n, n, n, n) - vă permite să setați propriile valori de la 0 la 1.
Treceți la următorul bloc cu mouse-ul și vedeți-vă cum apare tranziția cu această sau acea funcție.
După cum puteți vedea, în funcție de valoarea proprietății funcției de tranziție-temporizare, tranziția poate avea loc în mod diferit. Deși uneori această diferență nu este foarte vizibilă, de exemplu, dacă durata de tranziție este stabilită la o valoare temporară mică sau blocul pentru care efectul este efectuat, are dimensiuni mici și așa mai departe.
Exemple de utilizare a proprietății de tranziție
Pentru a vă ușura să înțelegeți cum să aplicați corect proprietatea de tranziție, vă voi da câteva exemple. Voi începe, probabil, cu cele mai simple. Amintiți-vă blocul cu lățimea și culoarea diferite atunci când plasați cursorul pe el la începutul postului? Să facem același lucru acum doar folosind proprietatea de tranziție.
Exemplul 1.
În exemplu, a fost aplicată o funcție liniară, apoi o voi folosi în post. Puteți aplica în mod absolut orice. În proprietatea de tranziție, valoarea totală a fost utilizată, adică toate proprietățile posibile, și anume culoarea de fundal, culoarea și lățimea textului, și-au modificat valorile pentru același timp și utilizând aceeași funcție. Pentru ca fiecare proprietate să varieze în moduri diferite, trebuie să le scrieți printr-o virgulă cu valori diferite. Aici:
În acest caz, toate proprietățile și-au schimbat valorile la rândul lor, începând cu culoarea de fundal și terminând cu lățimea. Fiecare proprietate are o funcție proprie.
Exemplul 2.
Cu flori și mărimi găsite. Acum să lăsăm blocul de dispariție în mișcare.
Cu proprietățile opacitate și marginea stângă, blocul se mișcă și dispare în două secunde.
Exemplul 3.
Un alt exemplu simplu. De data aceasta, textul are o umbră albă, deși în acest caz seamănă cu o lumină de fundal, nu cu o umbră, dar proprietatea este numită în acest fel.
Am implementat-o folosind proprietatea text-shadow.
Exemplul 4.
Un pic complica sarcina, face ca unitatea să se rotească.
Pentru a implementa acest exemplu, trebuie doar să măriți valorile de lățime și înălțime din bloc cu pseudo-clasa: active.
Există într-adevăr o mulțime de modalități de a utiliza proprietatea de tranziție CSS, sunt sigur că va exista și mai mult în viitor. Am dat doar exemplele cele mai simple pentru a demonstra tranziția în acțiune. Referințele, apropo, pe blogul meu își schimbă culoarea când le plasați cu mouse-ul cu el. Cred că v-am plictisit cu un dreptunghi gri, dar pe el a fost posibil să arătați perfect tot ce vroiam. În combinație cu alte proprietăți și grafică, tranziția poate face lucruri foarte frumoase. Încearcă!
Trimiteți-le prietenilor:
Articole similare
Trimiteți-le prietenilor: