Acest articol va oferi:
- Metoda 1: Efect de fade-in Folosind proprietatea animației CSS
- Metoda 2: Efect de fade-in folosind proprietatea de tranziție CSS
Metoda 1: Efect de fade-in folosind proprietatea „animație” CSS
Pentru a proiecta o pagină HTML simplă, adăugați următorul element pe ea:
- Adaugă ' ” împreună cu elementul “ stil ” atribut. Atributul „stil” conține proprietățile de stil ale elementului.
- Aplicați „ culoare ” proprietate din atributul stil pentru a defini culoarea textului elementului.
- După aceea, utilizați „ ” element pentru a adăuga ceva text sau un simplu paragraf.
Mai jos este codul HTML:
< h2 stil = „culoare: rgb(84, 8, 191)” >
Site-ul de tutoriale Linuxhint
< / h2 >
< p > efect de fade-in la încărcarea paginii < / p >
Pagina HTML a fost creată cu succes:
În secțiunea CSS, pentru a aplica efectul de fade-in pe pagină, butonul „ animaţie ” Proprietatea CSS va fi folosită pe „
Element de stil „corp”.
corp {animație: fadeInPage ease 3s;
animație-iterație-număr: unu ;
}
„
” este aplicat cu următoarele proprietăți CSS:- „ animaţie ” este proprietatea scurtă care stabilește animația prin specificarea mai multor valori. Aici sunt definite numele animației, funcția de sincronizare a animației și durata animației.
- „ animație-iterație-număr ” definește de câte ori ar trebui să se repete animația.
Aplicați regulile „@keyframes” la „animație”
@keyframes fadeInPage {0 % {
opacitate: 0 ;
}
100 % {
opacitate: unu ;
}
}
Pentru a defini „ @keyframes ” reguli pentru animație, menționați numele animației după cuvântul cheie @keyframes. Modificați comportamentul animației după cum urmează:
- La „ 0% ” animație, ” opacitate ” proprietății i se atribuie valoarea 0. Înseamnă că atunci când animația începe, imaginea este transparentă.
- La „ 100% ” animație, opacitatea este setată la „ unu ”, care se referă la o culoare solidă.
Ieșire
Să mergem mai departe către a doua metodă de aplicare a efectului Fade-in la încărcarea paginii.
Metoda 2: Efect de fade-in folosind proprietatea de „tranziție” CSS
Adăugați un „ onload ' atribut din cadrul '
În acest exemplu, CSS „ tranziție ” proprietatea este utilizată pentru a adăuga un efect de fade-in:
corp {opacitate: 0 ;
tranziție: opacitate 6s;
}
Mai jos este explicația proprietăților menționate mai sus:
- „ opacitate ” proprietate definește transparența elementelor.
- Folosind CSS „ tranziție ”, modificați treptat valorile proprietăților într-un timp specificat.
Ieșire
V-am învățat metodele de utilizare a CSS pentru un efect de fade-in la încărcarea paginii.
Concluzie
Mai multe proprietăți CSS pot fi utilizate pentru a aplica un efect de fade-in asupra elementelor HTML. Mai precis, „ animaţie ”, “ opacitate ', și ' tranziție ” proprietățile pot fi folosite pentru a specifica efecte animate pe pagini sau elemente. Animațiile sunt ajustate utilizând butonul „ @cheie ” reguli. Acest articol a explicat metodele de adăugare a unui efect de fade-in la încărcarea paginii folosind CSS.