Ne uităm la un exemplu
Cred că e mai bine să privim imediat exemplul. Să presupunem că avem două blocuri identice. În marcajul html propun să le desemnați după cum urmează:
Fiecare element a primit două clase de stil. De ce este necesar? Prima clasă este regulile generale pentru aspect, blocurile sunt aceleași, astfel încât acestea să poată fi descrise împreună. În exemplul real, cel mai probabil, va fi diferit. De asemenea, fiecare element are o clasă de stil unică. Și el este util.
Prin aceste reguli, am atribuit aceeași aparență ambelor blocuri: înălțime, lățime, dimensiune font, liniuță și fundal verde. Ultima proprietate a tranziției este relativ nouă și este inclusă în versiunea CSS3. Aceasta indică întârzierea, după care anumite reguli sunt îndeplinite. De fapt, acesta este ceea ce oferă un aspect neted.
În exemplu, am înregistrat o secundă, dacă doriți, puteți pune mai mult sau mai puțin. Când vedeți proprietatea în acțiune, puteți să vă ajustați singură valoarea.
Cum să implementați un aspect neted în css3?
Apoi, există două opțiuni de acțiune. Să presupunem că trebuie să ascundem cel de-al doilea bloc în timp ce îl plasăm pe primul într-un mod lin. Cea mai obișnuită metodă de a ascunde un element este utilizarea regulii de afișare: nici una. Dar nu va da exact ceea ce are nevoie - un aspect neted. Elementul apare brusc.
Prin urmare, vom acționa diferit. Vezi acest cod:
Am folosit încă o proprietate CSS3 - opacitate. Specifică transparența elementului, care este prescris de la elementul 0 (complet transparent) la 1 (complet opac).
Mai întâi, îndepărtați complet al doilea bloc din ochi, făcându-l transparent. Acum trebuie să vă asigurați că atunci când mutați mouse-ul pe prima unitate, al doilea apare fără probleme. Pentru aceasta, folosiți următorul selector combo interesant:
Adică schimbarea de stiluri apare atunci când plasați cursorul pe primul bloc, iar al doilea se schimbă direct. Datorită tranziției prescrise anterior, nu va apărea brusc, dar fără probleme, ceea ce avem nevoie de tine. Prin schimbarea valorii tranziției, puteți face apariția mai abruptă sau invers, sau o puteți încetini chiar mai mult.
Aici, cu o astfel de viteză, există un bloc la tranziția valorii stabilite: 1s. Apropo, puteți seta valoarea în milisecunde, dacă doriți.
Plasați cursorul peste bloc
Utilizați în practică
Ei bine, și unde vă poate fi de folos în realitate? De exemplu, atunci când dezvoltați un meniu drop-down. După cum puteți vedea, cu ajutorul css3 și aspectul luminos al elementelor de astăzi puteți face o astfel de navigare chiar și fără a folosi scripturi. Și aceasta îmbunătățește performanța resursei dvs. de Internet.
Puteți da un alt exemplu. De exemplu, când treceți cu mouse-ul pe butonul "Feedback", apare un formular în care puteți scrie mesajul. Aceasta este exact ceea ce am inventat, de fapt, puteți inventa lucruri mult mai interesante care utilizează tranziții fără probleme.
Un exemplu de utilizare este aspectul neted al unei explicații pentru o imagine
Să ne uităm la un exemplu simplu. Am o imagine și vreau să fie afișată o explicație fără probleme. Iată imaginea:
Încheiați-o în bloc și adăugați un paragraf cu o explicație:
Rămâne să adăugați stilurile necesare:
Și asta sa întâmplat:
Jumping pe o motocicletă
După cum puteți vedea, blocul cu explicația apare fără probleme datorită proprietății de tranziție specificată. În primul exemplu din acest articol am folosit doar un parametru al acestei proprietăți - timpul. De data aceasta parametrii sunt mai mult:
tranziție: stânga 0.3s liniară;
top este numele proprietății la care doriți să aplicați efectul planului. În acest caz, netezirea va fi aplicată numai la partea de sus a proprietății și nu mai mult la oricare altul.
0.3s - acest lucru este de înțeles, timpul de tranziție.
liniar - funcția de tranziție. Acesta este un subiect separat și nu cel mai simplu. Apropo, există, de asemenea, astfel de funcții: ușurință, ușurință, ușurință. Încercați-l, cu siguranță observați o mică diferență.
Adică cea mai lentă avansare a devenit posibilă din cauza proprietății de tranziție. dacă nu, atunci inscripția ar apărea brusc, ceea ce deja nu pare așa de răcoros. Ei bine, paragraful în sine cu textul sa mutat cu ajutorul poziționării absolute. Despre acest și alte tipuri de poziționare, puteți citi în acest articol.
Interesant de lumea construirii site-urilor
V-ați abonat. Mulțumesc.
Trimiteți-le prietenilor: