Ez a cikk a következőket nyújtja:
- 1. módszer: Fade-in Effect CSS-animációs tulajdonság használatával
- 2. módszer: Eltűnési effektus a CSS átmeneti tulajdonság használatával
1. módszer: Fade-in Effect CSS „animációs” tulajdonság használatával
Egy egyszerű HTML oldal megtervezéséhez adja hozzá a következő elemet:
- Add hozzá a ' ' elem mellett a ' stílus ' tulajdonság. A „style” attribútum az elem stílustulajdonságait tartalmazza.
- Alkalmazza a „ szín ” tulajdonságot a style attribútumban az elem szövegszínének meghatározásához.
- Ezt követően használja a „ ” elemet szöveg vagy egyszerű bekezdés hozzáadásához.
Alább látható a HTML kód:
< h2 stílus = 'szín: rgb(84, 8, 191)' >
Linuxhint bemutató webhely
< / h2 >
< p > fade-in hatás az oldal betöltésekor < / p >
A HTML oldal sikeresen létrejött:
A CSS szakaszban az elhalványítási effektus alkalmazásához a „ élénkség ' A CSS tulajdonságot a '
Stílus „test” elem
test {animáció: fadeInPage easy 3s;
animáció-iteráció-szám: egy ;
}
A „
” a következő CSS-tulajdonságokkal kerül alkalmazásra:- ' élénkség ” az a gyorsírás tulajdonság, amely több érték megadásával állítja be az animációt. Itt van megadva az animáció neve, az animáció időzítési funkciója és az animáció időtartama.
- ' animáció-iteráció-számlálás ” határozza meg, hogy az animációnak hányszor kell ismétlődnie.
Alkalmazza a „@keyframes” szabályokat az „animációra”
@keyframes fadeInPage {0 % {
átlátszatlanság: 0 ;
}
100 % {
átlátszatlanság: egy ;
}
}
A „ @keyframes ” az animációra vonatkozó szabályokat, említse meg az animáció nevét a @keyframes kulcsszó után. Módosítsa az animáció viselkedését az alábbiak szerint:
- Nál nél ' 0% 'animáció, a ' átlátszatlanság ” tulajdonság értéke 0. Ez azt jelenti, hogy amikor az animáció elindul, a kép átlátszó.
- Nál nél ' 100% ” animáció, az átlátszatlanság értéke „ egy ”, amely egyszínűre utal.
Kimenet
Lépjünk tovább a második módszer felé, amellyel a Fade-in effektust alkalmazhatjuk az oldalbetöltéskor.
2. módszer: Fade-in Effect CSS „átmeneti” tulajdonság használatával
Adjon hozzá egy ' Feltöltés alatt ' attribútum a '
Ebben a példában a CSS ' átmenet ” tulajdonságot a fade-in effektus hozzáadására használják:
test {átlátszatlanság: 0 ;
átmenet: átlátszatlanság 6s;
}
A fent említett tulajdonságok magyarázata a következő:
- ' átlátszatlanság ” tulajdonság határozza meg az elemek átlátszóságát.
- CSS használata ' átmenet ”, fokozatosan módosítja a tulajdonságok értékeit egy meghatározott idő alatt.
Kimenet
Megtanítottuk Önnek a CSS használatának módszereit az oldalbetöltés elhalványítására.
Következtetés
Számos CSS-tulajdonság használható a fade-in effektus alkalmazására a HTML-elemeken. Pontosabban a „ élénkség ”, „ átlátszatlanság ”, és „ átmenet ” tulajdonságok használhatók animált effektusok megadására oldalakon vagy elemeken. Az animációkat a „ @keyframe ” szabályokat. Ez a cikk elmagyarázza azokat a módszereket, amelyekkel a CSS használatával elhalványulhat az oldalbetöltés.