Jak animować GIFS w dokumencie HTML?

Wiele osób używa zdjęć, animowanych gifów i atrakcyjnych kolorów, aby ich strony wyglądały bardziej atrakcyjnie. Dzięki HTML oferuje to „„Element do osadzania obrazów i gifów na stronie internetowej. Mówiąc dokładniej, GIF to zbiór obrazów lub bezgłosny film, który automatycznie gra bez przycisku odtwarzania. Możemy animować te GIF w CSS, używając „animacja" nieruchomość.

Ten pismo będzie prowadzić o:

• Jak dodać GIFS w dokumencie HTML?
• Jak animować GIFS w dokumencie HTML?

Jak dodać GIFS w dokumencie HTML?

Wykonaj kroki, aby dodać GIF do strony HTML:

• Najpierw dodaj element DIV i przypisz go nazwa klasy „styl GIF".
• Aby dodać GIF, dodaj „„Element z atrybutami„ alt ”i„ src ”.
• „„src”Posiada adres URL GIF i„Alt”Atrybut zawiera alternatywny tekst, który wyświetla się, gdy obraz nie może załadować na stronie internetowej:

Można zauważyć, że GIF został pomyślnie dodany do dokumentu HTML:

Jak animować GIF w HTML?

GIF to już animowane obrazy, ale użytkownicy mogą je ulepszyć za pomocą właściwości CSS. Z tego powodu spójrz na dane właściwości.

Element „Body” stylu

ciało
kolor tła: RGB (102 204 204);

CSS „kolor tła„Właściwość służy do dostosowania koloru tła na całej stronie.

Wyjście

Element stylu „IMG”

.IMG w stylu GIF
szerokość: 250px;
TOP: 50px;
Pozycja: absolutna;
Racja: 0;
Animacja: animowane gif 15s nieskończone;

„„img„Element„ „styl GIF„Div jest ustawiony na te właściwości:

• "szerokość„Własność określa szerokość GIF.
• "szczyt”Generuje miejsce dla elementu od góry.
• "pozycja”Ustawia pozycję elementu na stronie. Jego wartość „absolutny”Odnosi się do dostosowania GIF w stosunku do ciała dokumentu.
• "Prawidłowy„Właściwość jest ustawiona na wartość”0”, Co oznacza brak miejsca po prawej stronie obrazu.
• "animacja”Jest właściwością stenograficzną określającą wartości nazwy animacji, czasu trwania animacji, animacji.

Stosowanie reguł @KeyFrame

@Keyframes Animated-GIF
0%
Transform: Translatex (300px);

100%
Transform: Translatex (-600px);

Nazwa animacji „animowany gif”Określone w powyższym kodzie jest wykorzystywane do ustawiania reguł @KeyFrame dla GIF:

• Przy 0% animacji GIF jest przenoszony w „300px”Na osi x.
• Przy 100% animacji GIF jest dostosowywane do „-600px”Na osi x.

Wyjście

Wyjście zweryfikowało, że GIF został pomyślnie animowany za pomocą CSS.

Wniosek

Aby osadzić GIF w dokumentach HTML, „„Element jest wykorzystywany z„src„Atrybut, który zawiera adres URL GIF. Chociaż te GIF są już animowane, możemy dodać więcej animacji za pomocą CSS ”animacja" nieruchomość. „„@Keyframe”Następnie określono reguły w celu ustalenia zachowania animacji. Ten post pokazał, jak animować GIF w dokumentach HTML.