Ta članek bo zagotovil:
- 1. način: Učinek zatemnitve z uporabo lastnosti animacije CSS
- 2. način: Učinek zatemnitve z uporabo lastnosti prehoda CSS
1. način: Učinek zatemnitve z uporabo lastnosti »animacije« CSS
Če želite oblikovati preprosto stran HTML, ji dodajte naslednji element:
- Dodajte » ' skupaj z ' stil ” atribut. Atribut »style« vsebuje slogovne lastnosti elementa.
- Uporabite ' barva ” v atributu style za določanje barve besedila elementa.
- Po tem uporabite » ”, če želite dodati besedilo ali preprost odstavek.
Spodaj je koda HTML:
< h2 stil = 'barva: rgb(84, 8, 191)' >
Spletno mesto z vadnicami za Linuxhint
< / h2 >
< str > učinek bledenja pri nalaganju strani < / str >
Stran HTML je uspešno ustvarjena:
V razdelku CSS za uporabo učinka zatemnitve na strani uporabite » animacija Lastnost CSS bo uporabljena na '
Element sloga 'telo'.
telo {animacija: fadeInPage ease 3s;
število iteracij animacije: eno ;
}
“
” je uporabljen z naslednjimi lastnostmi CSS:- “ animacija ” je skrajšana lastnost, ki nastavi animacijo z navedbo več vrednosti. Tu so definirani ime animacije, funkcija-časovne-animacije in trajanje-animacije.
- “ število ponovitev animacije ” določa, kolikokrat naj se animacija ponovi.
Uporabi pravila »@keyframes« za »animacijo«
@keyframes fadeInPage {0 % {
motnost: 0 ;
}
100 % {
motnost: eno ;
}
}
Za opredelitev ' @keyframes ” za animacijo navedite ime animacije za ključno besedo @keyframes. Spremenite vedenje animacije na naslednji način:
- pri “ 0 % ' animacija, ' nepreglednost Lastnosti je dodeljena vrednost 0. To pomeni, da je slika prosojna, ko se animacija začne.
- pri “ 100 % ', je motnost nastavljena na ' eno «, ki se nanaša na enobarvno barvo.
Izhod
Pojdimo naprej proti drugi metodi za uporabo učinka zatemnitve pri nalaganju strani.
2. način: Učinek zatemnitve z uporabo lastnosti »prehoda« CSS
Dodajte » onload » znotraj »
V tem primeru je CSS ' prehod Lastnost ” se uporablja za dodajanje učinka zatemnitve:
telo {motnost: 0 ;
prehod: motnost 6s;
}
Sledi razlaga zgoraj navedenih lastnosti:
- “ nepreglednost Lastnost določa prosojnost elementov.
- Uporaba CSS ' prehod «, postopoma spremenite vrednosti lastnosti v določenem času.
Izhod
Naučili smo vas o metodah uporabe CSS za učinek zatemnitve pri nalaganju strani.
Zaključek
Več lastnosti CSS je mogoče uporabiti za uporabo učinka zatemnitve na elementih HTML. Natančneje, ' animacija ”, “ nepreglednost «, in » prehod Lastnosti lahko uporabite za določanje animiranih učinkov na straneh ali elementih. Animacije se prilagodijo z uporabo “ @ključni okvir ” pravila. V tem članku so razložene metode za dodajanje učinka pojemanja pri nalaganju strani s pomočjo CSS.