Tranziții CSS. Cum se utilizează tranzițiile CSS? Proprietatea width.
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Teorie: Descriere video Descarcă PDF
Cum se utilizează tranzițiile CSS?
Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:
Notă: Dacă partea de durată nu este specificată, tranziția nu va avea niciun efect, deoarece valoarea implicită este 0.
Următorul exemplu prezintă un element <div> 100px * 100px red. Elementul <div> a specificat, de asemenea, un efect de tranziție pentru proprietatea de lățime, cu o durată de 2 secunde:
Exemplu:
Acum, să specificăm o nouă valoare pentru proprietatea de lățime/width atunci când un utilizator se alătură peste elementul <div>:
Exemplu:
Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:
- proprietatea CSS la care doriți să adăugați un efect
- durata efectului
Notă: Dacă partea de durată nu este specificată, tranziția nu va avea niciun efect, deoarece valoarea implicită este 0.
Următorul exemplu prezintă un element <div> 100px * 100px red. Elementul <div> a specificat, de asemenea, un efect de tranziție pentru proprietatea de lățime, cu o durată de 2 secunde:
Exemplu:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Efectul de tranziție va începe atunci când proprietatea CSS (lățimea/width) specificată modifică valoarea.Acum, să specificăm o nouă valoare pentru proprietatea de lățime/width atunci când un utilizator se alătură peste elementul <div>:
Exemplu:
div:hover {
width: 300px;
}
Observați că atunci când cursorul se decuplează din element, acesta se va schimba treptat înapoi la stilul său original. Navigare în lectii
Cumpara abonament
Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.
