CSS3 -overgang - Fade -Out Effect

Det kaskaderende stilarket gir mange stylingegenskaper for HTML -elementene. Disse egenskapene inkluderer enkel styling til animasjon. Dessuten er fade-in og fade-out effekter blant de vanlige. CSS “overgang”Eiendom og“animasjon”Med @KeyFrame -reglene hjelper deg med å anvende animasjon på HTML -elementene.

Denne artikkelen vil illustrere metoden for å legge til Fade Out -effekter på forskjellige HTML -elementer.

Hvordan legge til en fade-out-effekt til tekst?

“animasjon”Eiendom kan brukes til å legge til en fade-out-effekt til teksten. For å gjøre det, først, i HTML -filen, legger du til et "" element og tildeler det "Fadeout-Text”Id:

Linuxint

Stil “#fadeout-text” id

“#Fadeout-Text”Brukes til å få tilgang til den opprettede ID med ID“Fadeout-Text”Og bruk følgende egenskaper:

#fadeout-text
Bredde: 100%;
Farge: Darkred;
Fontstørrelse: 6em;
tekst-align: sentrum;
Font-family: Fantasy;
avstand mellom bokstavene: .2em;
Animasjon: Fadeout 5s;

Her:

• “bredde”Bestemmer divelementets bredde.
• “farge”Definerer elementets tekst eller skriftfarge.
• “skriftstørrelse”Angir størrelsen på skriften.
• “Tekstalign”Bestemmer tekstjusteringen.
• “Font-familie”Bestemmer skriftstilen.
• “avstand mellom bokstavene”Setter avstanden mellom karakterene.
• “animasjon”Eiendom setter animasjonsnavnet”fadeout”Og varigheten”5s”Som fem sekunder.

Definer “@keyframes” -regel til animasjonseiendom

For å anvende animasjonsatferden på elementet, må du nevne “animasjon”Navn etter“@KeyFrame”Nøkkelord som følger:

@KeyFrames fadeout
0%
Opacitet: 1;

100%
Opacitet: 0;

Følgende er forklaringen på ovennevnte kodebit:

• “0%”Definerer starten på en animasjon.
• “100%”Definerer slutten på en animasjon.
• “Opacitet”Eiendom brukes til å justere gjennomsiktighetsnivået til et element.

Produksjon

Hvordan legge til en fade-out effekt på svevet?

I HTML er det også mulig å anvende fade-out-effekten når brukeren henger musen over elementet.

Eksempel

Eksemplet nedenfor instruerer hvordan du bruker en fade-out-effekt på svevet.

Stil “fadeout-text” id

For det første, spesifiser "Opacitet" som "100%”I tillegg til de andre stilte egenskapene:

Opacitet: 100%;

Legg til “: Hover” pseudo-selector

#fadeout-text: hover
Opacitet: 10%;
Overgang: 3s;

“#fadeout-text: sveve”Brukes til å bruke de spesifiserte egenskapene på elementet på svevet. Her, "overgang”Eiendom endrer elementets bevegelse innen varigheten.

Produksjon

Hvordan legge til en fade-out-effekt til bilder?

Å legge til animasjonseffekter på bilder er en av de mest underholdende funksjonene i webapplikasjonen. Ved hjelp av det tidligere omtalte konseptet, kan du også visne ut bildet på en webside.

Eksempel

Legg til en "”Element og tilordne det ID”Fadeout-Image”:

Stil “fadeout-image” id

“#Fadeout-Image”Brukes til å få tilgang til ID“ Fadeout-Image ”av HTML og bruke følgende egenskaper:

#fadeout-image
Bredde: 100%;
Høyde: 50%;
Bakgrunnsbilde: URL (/bilder/natt-.jpg);
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsstørrelse: Deksel;
Posisjon: Absolutt;
Animasjon: Fadeout 5s;

I koden ovenfor:

• “bakgrunnsbilde”Definerer bildens url.
• “Bakgrunnsrepetitt”Definerer for ikke å gjenta bildet.
• “bakgrunnsstørrelse”Spesifiserer bakgrunnsbildestørrelsen.
• “posisjon”Eiendom som“Absolutt”Setter bildeposisjonen som er relevant for den nærmeste plasserte stamfaren.

Legg til "@keyframe" -regler til "animasjon" -egenskaper

Tilsvarende vil vi bruke "@KeyFrames”Regler for å anvende den fade-out-effekten for å skape en animasjonseffekt:

@KeyFrames fadeout
0%
Opacitet: 1;

100%
Opacitet: 0;

Produksjon

Det handlet om å legge til en fade-out-effekt på HTML-elementer ved bruk av CSS.

Konklusjon

CSS -egenskaper som "Opacitet”,“animasjon”,“overgang”, Og“@KeyFrame”Regler er viktige for å legge til en fade-out-effekt på HTML-elementer. "Opaciteten" setter transparensnivået, "overgangen" -egenskapen justerer den gradvise bevegelsen av animasjonen, og "animasjon" -egenskapen, sammen med "@keyframes" -regelen, hjelper til med å legge animasjon til elementene. Dette innlegget har forklart prosedyren for hvordan du kan legge til en fade-out-effekt på elementer ved bruk av CSS.