Hvordan animere GIF -er i HTML -dokument?

Mange individer bruker bilder, animerte GIF -er og attraktive farger for å få nettstedene sine til å se mer tiltalende. Takk til HTML, som tilbyr "”Element for å legge inn bilder og GIF -er på websiden. Mer spesifikt er en GIF en samling bilder eller en lydløs video som automatisk spiller uten en spillknapp. Vi kan animere disse GIF -ene i CSS ved å bruke "animasjon”Eiendom.

Denne oppskrivningen vil guide om:

• Hvordan legge til GIF -er i HTML -dokument?
• Hvordan animere GIF -er i HTML -dokument?

Hvordan legge til GIF -er i HTML -dokument?

Følg trinnene for å legge til en GIF på HTML -siden:

• For det første, legg til et divelement og tilordne det et klassenavn "GIF-stil”.
• For å legge til en GIF, legg til en “”Element med“ ALT ”og“ SRC ”attributter.
• “src”Holder nettadressen til GIF, og“alt”Attributt inneholder den alternative teksten, som vises når bildet ikke kan laste på websiden:

Det kan observeres at GIF er lagt til HTML -dokumentet med hell:

Hvordan animere GIF -er i HTML?

GIF -ene er allerede animerte bilder, men brukere kan forbedre dem ved hjelp av CSS -egenskapene. For denne årsaken, ta en titt på de gitte egenskapene.

Stil "kropp" -element

kropp
bakgrunnsfarge: RGB (102 204 204);

CSS “bakgrunnsfarge”Eiendom brukes til å justere bakgrunnsfargen på hele siden.

Produksjon

Stil “IMG” -element

.gif-stil img
Bredde: 250px;
Topp: 50px;
Posisjon: Absolutt;
Til høyre: 0;
Animasjon: animert gif 15s uendelig;

“img”Element i“GIF-stil”Div er satt med disse egenskapene:

• “bredde”Eiendom bestemmer bredden på GIF.
• “topp”Genererer plass for elementet fra toppen.
• “posisjon”Setter elementets plassering på siden. Dens verdi “Absolutt”Henviser til justering av GIF i forhold til dokumentets kropp.
• “Ikke sant”Eiendom er satt til verdien”0”, Som betyr ikke noe rom til høyre for bildet.
• “animasjon”Er Shorthand-egenskapen som spesifiserer verdiene for animasjonsnavn, animasjonsforsyning, animasjon-iteration-count.

Bruker @KeyFrame -regler

@KeyFrames animert-Gif
0%
Transform: Translatex (300px);

100%
Transform: Translatex (-600px);

Animasjonsnavnet "animert-gif”Spesifisert i koden ovenfor brukes til å angi @KeyFrame -reglene for GIF:

• Ved 0% av animasjonen flyttes GIF på “300px”På x-aksen.
• Ved 100% av animasjonen justeres GIF ved “-600px”På x-aksen.

Produksjon

Utgangen har bekreftet at GIF har blitt animert med hell ved hjelp av CSS.

Konklusjon

For å legge inn GIF -er i HTML -dokumenter, "”Element brukes med“src”Attributt, som holder nettadressen til GIF. Selv om disse GIF -ene allerede er animert, kan vi legge til flere animasjoner ved å bruke CSS "animasjon”Eiendom. “@KeyFrame”Regler blir deretter spesifisert for å bestemme animasjonsatferden. Dette innlegget har vist hvordan man animerer GIF -er i HTML -dokumenter.