Come animare GIF nel documento HTML?

Molte persone usano immagini, GIF animate e colori attraenti per rendere i loro siti Web più attraenti. Grazie a HTML, questo offre il “"Elemento per incorporare immagini e gif nella pagina web. Più specificamente, una GIF è una raccolta di immagini o un video senza suono che riproduce automaticamente senza un pulsante di riproduzione. Possiamo animare queste GIF in CSS utilizzando il "animazione" proprietà.

Questo articolo guiderà su:

• Come aggiungere GIF nel documento HTML?
• Come animare GIF nel documento HTML?

Come aggiungere GIF nel documento HTML?

Segui i passaggi per aggiungere una GIF alla pagina HTML:

• In primo luogo, aggiungi un elemento div e assegnalo un nome di classe "stile gif".
• Per aggiungere una gif, aggiungi un ""Elemento con gli attributi" alt "e" src ".
• IL "src"Tiene l'URL della GIF e il"Al"L'attributo contiene il testo alternativo, che viene visualizzato quando l'immagine non può caricare sulla pagina Web:

Si può osservare che la GIF è stata aggiunta correttamente al documento HTML:

Come animare GIF in HTML?

Le GIF sono già immagini animate, ma gli utenti possono migliorarle utilizzando le proprietà CSS. Per questa causa, dai un'occhiata alle proprietà fornite.

Elemento "corpo" di stile

corpo
Background-color: RGB (102 204 204);

Il CSS "colore di sfondo"La proprietà viene utilizzata per regolare il colore di sfondo attraverso l'intera pagina.

Produzione

Elemento "img" di stile

.IMG in stile GIF
larghezza: 250px;
Top: 50px;
Posizione: assoluto;
a destra: 0;
Animazione: animato-gif 15s infinite;

IL "img"Elemento del"stile gif"Div è impostato con queste proprietà:

• "larghezza"La proprietà determina la larghezza della GIF.
• "superiore"Genera spazio per l'elemento dall'alto.
• "posizione"Imposta la posizione dell'elemento sulla pagina. Il suo valore "assoluto"Si riferisce all'adeguamento della GIF rispetto al corpo del documento.
• "GiustoLa proprietà "è impostata sul valore"0", Che significa nessun spazio a destra dell'immagine.
• "animazione"La proprietà stenografia specifica i valori per il nome dell'animazione, la durata dell'animazione, il conteggio dell'animazione.

Applicando le regole @KeyFrame

@KeyFrames Animated-Gif
0%
trasformazione: traduzionex (300px);

100%
trasformazione: traduzionex (-600px);

Il nome dell'animazione "GIF animato"Specificato nel codice sopra viene utilizzato per impostare le regole @KeyFrame per la GIF:

• Allo 0% dell'animazione, la GIF viene trasferita a "300px"Sull'asse X.
• Al 100% dell'animazione, la GIF viene regolata a "-600px"Sull'asse X.

Produzione

L'output ha verificato che la GIF è stata animata con successo usando CSS.

Conclusione

Incorporare le gif nei documenti HTML, ""L'elemento viene utilizzato con il"src"Attributo, che contiene l'URL della GIF. Sebbene queste GIF siano già animate, possiamo aggiungere più animazioni usando il CSS "animazione" proprietà. IL "@KeyFrame"Vengono quindi specificate le regole per determinare il comportamento dell'animazione. Questo post ha dimostrato come animare GIF nei documenti HTML.