Denne artikkelen vil gi:
- Metode 1: Fade-in-effekt ved bruk av CSS-animasjonsegenskap
- Metode 2: Fade-in-effekt ved bruk av CSS-overgangsegenskap
Metode 1: Fade-in-effekt ved å bruke CSS 'animasjon'-egenskap
For å designe en enkel HTML-side, legg til følgende element på den:
- Legg til ' '-elementet sammen med ' stil ' Egenskap. «style»-attributtet inneholder stilegenskapene til elementet.
- Bruk ' farge '-egenskapen i stilattributtet for å definere elementets tekstfarge.
- Etter det bruker du ' ”-element for å legge til litt tekst eller et enkelt avsnitt.
Nedenfor er HTML-koden:
< h2 stil = 'farge: rgb(84, 8, 191)' >
Linuxhint opplæringsnettsted
< / h2 >
< s > inntoningseffekt ved sideinnlasting < / s >
HTML-siden er opprettet:
I CSS-delen, for å bruke inntoningseffekten på siden, ' animasjon ' CSS-egenskapen vil bli brukt på ' '-elementet på HTML-siden.
Stil 'body' Element
kropp {animasjon: fadeInPage ease 3s;
animasjon-iterasjon-antall: en ;
}
«
» brukes med følgende CSS-egenskaper:- ' animasjon ” er stenografiegenskapen som setter animasjonen ved å spesifisere flere verdier. Her er animasjonsnavnet, animasjonstidsfunksjonen og animasjonens varighet definert.
- ' animasjon-iterasjon-telling ” definerer hvor mange ganger animasjonen skal iterere.
Bruk '@keyframes'-regler på 'animasjon'
@keyframes fadeInPage {0 % {
opasitet: 0 ;
}
100 % {
opasitet: en ;
}
}
For å definere ' @keyframes ” regler for animasjonen, nevner animasjonsnavnet etter @keyframes nøkkelordet. Endre animasjonsatferden som følger:
- på ' 0 % ' animasjon, ' opasitet ” egenskapen tildeles verdien 0. Det betyr at når animasjonen starter, er bildet gjennomsiktig.
- på ' 100 % ' animasjon, er opasiteten satt til ' en ”, som refererer til en solid farge.
Produksjon
La oss gå videre mot den andre metoden for å bruke inntoningseffekten ved sideinnlasting.
Metode 2: Fade-in-effekt ved å bruke CSS 'transition'-egenskap
Legg til en ' på Last '-attributt i ' ' element. Denne hendelsen utløses ved sideinnlasting. Ved belastning er opasiteten til kroppselementet satt til ' en ', som er relatert til en solid farge:
< kropp på Last = 'document.body.style.opacity='1'' >I dette eksemplet er CSS ' overgang '-egenskapen brukes for å legge til en inntoningseffekt:
kropp {opasitet: 0 ;
overgang: opasitet 6s;
}
Følgende er forklaringen av egenskapene ovenfor:
- ' opasitet ” egenskap definerer gjennomsiktigheten til elementene.
- Bruker CSS ' overgang ”, endre verdiene til eiendommene gradvis over en spesifisert tid.
Produksjon
Vi har lært deg metodene for å bruke CSS for en inntoningseffekt ved sideinnlasting.
Konklusjon
Flere CSS-egenskaper kan brukes til å bruke en inntoningseffekt på HTML-elementer. Mer spesifikt, ' animasjon ', ' opasitet ', og ' overgang egenskaper kan brukes til å spesifisere animerte effekter på sider eller elementer. Animasjonene justeres ved å bruke ' @keyframe 'regler. Denne artikkelen har forklart metodene for å legge til en inntoningseffekt ved sideinnlasting ved bruk av CSS.