Tento článok poskytne:
- Metóda 1: Efekt zoslabenia pomocou vlastnosti CSS animácie
- Metóda 2: Efekt zoslabenia pomocou vlastnosti prechodu CSS
Metóda 1: Efekt zoslabenia pomocou vlastnosti „animácia“ CSS
Ak chcete navrhnúť jednoduchú HTML stránku, pridajte na ňu nasledujúci prvok:
- Pridajte „ “prvok spolu s “ štýl “. Atribút „style“ obsahuje vlastnosti štýlu prvku.
- Použiť „ farba ” v atribúte style na definovanie farby textu prvku.
- Potom použite „ ” na pridanie nejakého textu alebo jednoduchého odseku.
Nižšie je uvedený HTML kód:
< h2 štýl = 'color: rgb(84, 8, 191)' >
Webová stránka s výučbou Linuxhint
< / h2 >
< p > efekt zoslabenia pri načítaní stránky < / p >
Stránka HTML bola úspešne vytvorená:
V sekcii CSS, ak chcete použiť efekt zoslabovania na stránke, „ animácie Vlastnosť CSS sa použije na ” prvok HTML stránky.
Štýlový prvok „telo“.
telo {animácia: fadeInPage easy 3s;
počet-iterácií animácií: jeden ;
}
„
“ sa používa s nasledujúcimi vlastnosťami CSS:- “ animácie ” je skrátená vlastnosť, ktorá nastavuje animáciu zadaním viacerých hodnôt. Tu je definovaný názov animácie, funkcia časovania animácie a trvanie animácie.
- “ animácia-iterácia-počet ” definuje, koľkokrát sa má animácia opakovať.
Použite pravidlá „@keyframes“ na „animáciu“
@keyframes fadeInPage {0 % {
nepriehľadnosť: 0 ;
}
100 % {
nepriehľadnosť: jeden ;
}
}
Na definovanie „ @kľúčové snímky ” pravidlá pre animáciu, uveďte názov animácie za kľúčovým slovom @keyframes. Upravte správanie animácie takto:
- o „ 0% animácia, nepriehľadnosť Vlastnosť ” má priradenú hodnotu 0. To znamená, že pri spustení animácie je obrázok priehľadný.
- o „ 100% ” animácia, nepriehľadnosť je nastavená na “ jeden “, čo znamená plnú farbu.
Výkon
Prejdime k druhej metóde použitia efektu Fade-in pri načítaní stránky.
Metóda 2: Efekt zoslabenia pomocou vlastnosti „prechodu“ CSS
Pridať „ načítať ” atribút v rámci “ ' prvok. Táto udalosť sa spúšťa pri načítaní stránky. Pri zaťažení je nepriehľadnosť prvku tela nastavená na „ jeden “, ktorá sa týka plnej farby:
< telo načítať = 'document.body.style.opacity='1'' >V tomto príklade CSS „ prechod ” vlastnosť sa používa na pridanie efektu zoslabovania:
telo {nepriehľadnosť: 0 ;
prechod: nepriehľadnosť 6s;
}
Nasleduje vysvetlenie vyššie uvedených vlastností:
- “ nepriehľadnosť vlastnosť definuje priehľadnosť prvkov.
- Používanie CSS “ prechod “, postupne meniť hodnoty vlastností počas určeného času.
Výkon
Naučili sme vás metódy používania CSS na efekt zoslabenia pri načítaní stránky.
Záver
Na aplikovanie efektu zoslabenia na prvky HTML možno použiť niekoľko vlastností CSS. Presnejšie povedané, „ animácie “, “ nepriehľadnosť “ a „ prechod ” vlastnosti možno použiť na určenie animovaných efektov na stránkach alebo prvkoch. Animácie sa upravujú pomocou „ @keyframe “ pravidlá. Tento článok vysvetľuje metódy na pridanie efektu zoslabovania pri načítavaní stránky pomocou CSS.