Wie man GIFs im HTML -Dokument animiert?

Viele Personen verwenden Bilder, animierte GIFs und attraktive Farben, damit ihre Websites attraktiver aussehen. Vielen Dank an HTML, das bietet das “Element, um Bilder und GIFs in die Webseite einzubetten. Insbesondere ist ein GIF eine Sammlung von Bildern oder ein solidloses Video, das automatisch ohne Wiedergabetaste abgespielt wird. Wir können diese GIFs in CSS animieren, indem wir die “nutzen“Animation" Eigentum.

In diesem Artikel wird anhand von:

• So fügen Sie GIFs im HTML -Dokument hinzu?
• Wie man GIFs im HTML -Dokument animiert?

So fügen Sie GIFs im HTML -Dokument hinzu?

Befolgen Sie die Schritte, um der HTML -Seite ein GIF hinzuzufügen:

• Fügen Sie zunächst ein Div -Element hinzu und weisen Sie ihm einen Klassennamen zu “GIF-Stil”.
• Um ein GIF hinzuzufügen, fügen Sie eine hinzu "Element mit den Attributen "Alt" und "SRC".
• Der "src”Hält die URL des GIF und die“AltDas Attribut enthält den alternativen Text, der angezeigt wird, wenn das Bild nicht auf der Webseite geladen wird:

Es kann beobachtet werden, dass das GIF dem HTML -Dokument erfolgreich hinzugefügt wurde:

Wie man GIFs in HTML animieren?

Die GIFs sind bereits animierte Bilder, aber Benutzer können sie mithilfe der CSS -Eigenschaften verbessern. Schauen Sie sich aus dieser Sache die angegebenen Eigenschaften an.

Stil „Körper“ Element

Körper
Hintergrundfarbe: RGB (102 204 204);

Das CSS “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe auf die gesamte Seite anzupassen.

Ausgang

Stil „img“ Element

.GIF-Stil img
Breite: 250px;
Top: 50px;
Position: absolut;
Rechts: 0;
Animation: Animated-Gif 15s Infinite;

Der "img"Element der"GIF-Stil”Div wird mit diesen Eigenschaften festgelegt:

• “Breite”Eigenschaft bestimmt die Breite des GIF.
• “SpitzeErzeugt Platz für das Element von oben.
• “Position”Legt die Position des Elements auf der Seite fest. Dessen Wert "absolut”Bezieht sich auf die Einstellung von GIF im Vergleich zum Körper des Dokuments.
• “Rechts"Eigenschaft wird auf den Wert gesetzt"0”, Was bedeutet, dass kein Platz rechts vom Bild ist.
• “AnimationIst die Kurzeigeneigenschaft, die die Werte für Animationsname, Animationsdauer, Animationsveranstalter-Counce angibt.

Anwenden @Keyframe -Regeln

@keyframes animiert-gif
0%
Transformation: Translatex (300px);

100%
Transformation: Translatex (-600px);

Der Animationsname “Animiertes GIFIm obigen Code wird angegeben, um die @Keyframe -Regeln für das GIF festzulegen:

• Bei 0% der Animation wird das GIF umgesiedelt “300px”Auf der x-Achse.
• Bei 100% der Animation wird das GIF bei “angepasst“-600px”Auf der x-Achse.

Ausgang

Die Ausgabe hat überprüft, dass das GIF mit CSS erfolgreich animiert wurde.

Abschluss

GIFs in HTML -Dokumente einbetten, die “"Element wird mit dem" verwendet "srcAttribut, das die URL des GIF hält. Obwohl diese GIFs bereits animiert sind, können wir mit den CSS mehr Animationen hinzufügenAnimation" Eigentum. Der "@keyframeAnschließend werden Regeln angegeben, um das Animationsverhalten zu bestimmen. Dieser Beitrag hat gezeigt, wie GIFs in HTML -Dokumenten animiert werden können.