Bruke CSS for en fade-in-effekt på sidelastning

CSS tillater oss å legge til forskjellige stylingegenskaper, for eksempel farge, grense, fontstørrelse og tekstjustering til HTML-elementene. Disse stylingegenskapene gir et attraktivt utseende på applikasjonen. I tillegg er det flere andre CSS -egenskaper som hjelper oss å legge til noen animasjonseffekter til elementene. Å bruke animasjoner kan også øke brukerengasjementet på websider.

Denne artikkelen vil gi:

• Metode 1: Fade-in effekt ved bruk av CSS-animasjonsegenskaper
• Metode 2: Fade-in effekt ved bruk av CSS-overgangsegenskaper

Metode 1: Fade-in effekt ved bruk av CSS “Animation” -egenskap

For å designe en enkel HTML -side, legg til følgende element på den:

• Legg til "

  ”Element sammen med“stil" Egenskap. "Style" -attributtet inneholder stylingegenskapene til elementet.

• Bruk “farge”Eiendom i stilattributtet for å definere elementets tekstfarge.
• Etter det, bruk "

  ”Element for å legge til litt tekst eller et enkelt avsnitt.

Nedenfor er HTML -koden:

Linuxhint Tutorial nettsted

Fade-inffekt på sidebelastning

HTML -siden opprettes vellykket:

I CSS-delen, for å anvende fade-in-effekten på siden, “animasjon”CSS -eiendom vil bli brukt på“”Element på HTML -siden.

Stil "kropp" -element

kropp
Animasjon: Fadeinpage Ease 3s;
Animasjon-iteration-count: 1;

“” Brukes med følgende CSS -egenskaper:

• “animasjon”Er Shorthand -egenskapen som setter animasjonen ved å spesifisere flere verdier. Her er animasjonsnavnet, animasjonstiming-funksjonen og animasjonsforsyningen definert.
• “Animasjon-iteration-count”Definerer hvor mange ganger animasjonen skal iterere.

Bruk regler for "@keyframes" om "animasjon"

@KeyFrames fadeInpage
0%
Opacitet: 0;

100%
Opacitet: 1;

Å definere “@KeyFrames”Regler for animasjonen, nevn animasjonsnavnet etter @keyframes nøkkelordet. Endre animasjonsatferden som følger:

• På “0%”Animasjon,“Opacitet”Eiendom tildeles verdien 0. Det betyr at når animasjonen starter, er bildet gjennomsiktig.
• På “100%”Animasjon, opaciteten er satt til“1”, Som refererer til en solid farge.

Produksjon

La oss gå videre mot den andre metoden for å anvende Fade-in-effekten på sidelastning.

Metode 2: Fade-in effekt ved bruk av CSS “Overgang” -egenskap

Legg til en “på Last”Attributt i“”Element. Denne hendelsen utløses på sidebelastning. Ved belastning er kroppselementets opacitet satt til “1”, Som angår en solid farge:

I dette eksemplet er CSS “overgang”Eiendom brukes til å legge til en fade-in-effekt:

kropp
Opacitet: 0;
Overgang: Opacity 6s;

Følgende er forklaringen på de ovennevnte egenskapene:

• “Opacitet”Eiendom definerer elementene åpenhet.
• Bruker CSS “overgang”, Endrer gradvis verdiene på egenskaper over en spesifisert tid.

Produksjon

Vi har lært deg metodene for å bruke CSS for en fade-in effekt på sidelastning.

Konklusjon

Flere CSS-egenskaper kan brukes til å bruke en fade-in-effekt på HTML-elementer. Mer spesifikt, “animasjon”,“Opacitet”, 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 fade-in-effekt på sidelastning ved hjelp av CSS.