Tämä artikkeli tarjoaa:
- Tapa 1: Häivytystehoste CSS-animaatio-ominaisuuden avulla
- Tapa 2: Häivytysvaikutus CSS-siirtymäominaisuuden avulla
Tapa 1: Häivytysvaikutus CSS-animaatio-ominaisuuden avulla
Suunnittele yksinkertainen HTML-sivu lisäämällä siihen seuraava elementti:
- Lisää ' ' elementti yhdessä ' tyyli ”-attribuutti. Attribuutti 'style' sisältää elementin tyyliominaisuudet.
- Käytä ' väri- ”-ominaisuutta style-attribuutissa määrittääksesi elementin tekstin värin.
- Käytä sen jälkeen ' ”-elementtiä tekstin tai yksinkertaisen kappaleen lisäämiseksi.
Alla on HTML-koodi:
< h2 tyyli = 'väri: rgb(84, 8, 191)' >
Linuxhint opetusohjelmasivusto
< / h2 >
< s > häivytysvaikutus sivun latauksessa < / s >
HTML-sivu on luotu onnistuneesti:
Käytä CSS-osiossa häivytystehostetta sivulla ' animaatio ' CSS-ominaisuutta käytetään ' ” HTML-sivun elementti.
Tyyli 'vartalo' elementti
kehon {animaatio: fadeInPage ease 3s;
animaatioiden iteraatioiden määrä: yksi ;
}
'
' käytetään seuraavien CSS-ominaisuuksien kanssa:- ' animaatio ” on pikakirjoitusominaisuus, joka määrittää animaation määrittämällä useita arvoja. Tässä määritellään animaation nimi, animaation ajoitustoiminto ja animaation kesto.
- ' animaatioiden iteraatioiden määrä ” määrittää, kuinka monta kertaa animaation tulee iteroida.
Käytä @keyframes-sääntöjä animaatioon
@keyframes fadeInPage {0 % {
opasiteetti: 0 ;
}
100 % {
opasiteetti: yksi ;
}
}
Määrittääksesi ' @keyframes ” animaation säännöt, mainitse animaation nimi avainsanan @keyframes jälkeen. Muokkaa animaation käyttäytymistä seuraavasti:
- klo ' 0 % 'animaatio, ' opasiteetti ”-ominaisuuden arvoksi on annettu 0. Se tarkoittaa, että animaation alkaessa kuva on läpinäkyvä.
- klo ' 100 % ' animaatio, peittävyydeksi on asetettu ' yksi ”, joka viittaa yhtenäiseen väriin.
Lähtö
Siirrytään eteenpäin kohti toista menetelmää häivytystehosteen käyttämiseksi sivun latauksessa.
Tapa 2: Häivytysvaikutus CSS-siirtymäominaisuuden avulla
Lisää ' lastina ' attribuutti ' ”elementtiä. Tämä tapahtuma käynnistyy sivun latauksen yhteydessä. Kuormituksen aikana runko-osan opasiteetti asetetaan arvoon ' yksi ”, joka liittyy yhtenäiseen väriin:
< kehon lastina = 'document.body.style.opacity='1'' >Tässä esimerkissä CSS ' siirtyminen ” -ominaisuutta käytetään lisäämään häivytysvaikutus:
kehon {opasiteetti: 0 ;
siirtymä: opasiteetti 6s;
}
Seuraavassa on selitys yllämainituista ominaisuuksista:
- ' opasiteetti ”-ominaisuus määrittää elementtien läpinäkyvyyden.
- CSS:n käyttö siirtyminen ”, muuttaa ominaisuuksien arvoja asteittain tietyn ajan kuluessa.
Lähtö
Olemme opettaneet sinulle menetelmät CSS:n käyttämiseen sivun latauksen häivytykseen.
Johtopäätös
Useita CSS-ominaisuuksia voidaan hyödyntää häivytysvaikutelman soveltamiseen HTML-elementteihin. Tarkemmin sanottuna ' animaatio ”, “ opasiteetti ”, ja ” siirtyminen '-ominaisuuksia voidaan käyttää animoitujen tehosteiden määrittämiseen sivuille tai elementeille. Animaatioita säädetään käyttämällä ' @avainkehys ”säännöt. Tässä artikkelissa on selitetty tavat lisätä häivytysvaikutus sivun lataukseen CSS:n avulla.