Šiame straipsnyje bus pateikta:
- 1 būdas: išnykimo efektas naudojant CSS animacijos ypatybę
- 2 metodas: išnykimo efektas naudojant CSS perėjimo ypatybę
1 būdas: išnykimo efektas naudojant CSS „animacijos“ ypatybę
Norėdami sukurti paprastą HTML puslapį, pridėkite prie jo šį elementą:
- Pridėkite ' “ elementas kartu su “ stilius “ atributas. Atribute „style“ yra elemento stiliaus savybės.
- Taikykite „ spalva “ savybę stiliaus atribute, kad apibrėžtumėte elemento teksto spalvą.
- Po to naudokite „ “ elementą, kad pridėtumėte tekstą arba paprastą pastraipą.
Žemiau yra HTML kodas:
< h2 stilius = 'spalva: rgb(84, 8, 191)' >
Linuxhint mokymo svetainė
< / h2 >
< p > išnykimo efektas įkeliant puslapį < / p >
HTML puslapis sėkmingai sukurtas:
CSS skiltyje, norėdami puslapyje pritaikyti išnykimo efektą, „ animacija CSS nuosavybė bus naudojama
Stiliaus „kūno“ elementas
kūnas {animacija: fadeInPage ease 3s;
animacijos iteracijų skaičius: vienas ;
}
„
“ taikoma su šiomis CSS ypatybėmis:- “ animacija “ yra trumpoji savybė, kuri nustato animaciją, nurodydama kelias reikšmes. Čia apibrėžiamas animacijos pavadinimas, animacijos laiko funkcija ir animacijos trukmė.
- “ animacija-iteracijų skaičius “ apibrėžia, kiek kartų animacija turi kartotis.
Taikykite „@keyframes“ taisykles „animacijai“
@keyframes fadeInPage {0 % {
neskaidrumas: 0 ;
}
100 % {
neskaidrumas: vienas ;
}
}
Norėdami apibrėžti ' @keyframes “ animacijos taisykles, paminėkite animacijos pavadinimą po raktinio žodžio @keyframes. Pakeiskite animacijos elgesį taip:
- „ 0 % “ animacija, “ neskaidrumas ypatybei priskiriama reikšmė 0. Tai reiškia, kad prasidėjus animacijai vaizdas yra skaidrus.
- „ 100 % “ animacija, neskaidrumas nustatytas į “ vienas “, kuri nurodo vientisą spalvą.
Išvestis
Pereikime prie antrojo metodo, kaip pritaikyti išnykimo efektą įkeliant puslapį.
2 būdas: išnykimo efektas naudojant CSS „perėjimo“ ypatybę
Pridėkite ' įkėlimas ' atributas, esantis '
Šiame pavyzdyje CSS ' perėjimas ypatybė naudojama norint pridėti išnykimo efektą:
kūnas {neskaidrumas: 0 ;
perėjimas: neskaidrumas 6s;
}
Toliau pateikiamas aukščiau nurodytų savybių paaiškinimas:
- “ neskaidrumas “ savybė apibrėžia elementų skaidrumą.
- Naudojant CSS “ perėjimas “, palaipsniui keiskite savybių reikšmes per nurodytą laiką.
Išvestis
Mes išmokėme jus, kaip naudoti CSS, kad būtų sumažintas puslapio įkėlimo efektas.
Išvada
Kelios CSS ypatybės gali būti naudojamos HTML elementų išnykimo efektui pritaikyti. Tiksliau, „ animacija “, „ neskaidrumas “ ir „ perėjimas “ ypatybes galima naudoti norint nurodyti animuotus efektus puslapiuose ar elementuose. Animacijos koreguojamos naudojant ' @keyframe “ taisyklės. Šiame straipsnyje paaiškinta, kaip pridėti išnykimo efektą įkeliant puslapį naudojant CSS.