如何在 HTML 頁面中使用動畫影像？

HTML 頁面中的動畫影像是會在網頁上移動的影像。它採用 GIF 格式，即影像交換格式檔案。

我們需要使用帶有src 屬性的<image> 標籤在 HTML 中新增動畫影像。src 屬性新增影像 URL（檔案目標）。

我們還可以使用height 和width 屬性設定影像的高度和寬度。

語法

<image src=”Animated image”>

示例 1

以下是顯示如何在 HTML 頁面中使用動畫影像的示例 −

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Adding Animated Images to the web page</p>
   <img src="https://tutorialspoint.tw/images/html.gif">
</body>
</html>

示例 2

可以嘗試執行以下內容來使用 HTML 中的動畫影像 −

<!DOCTYPE html>
<html>
<head>
   <title>Animated Image</title>
</head>
<body>
   <h1>Animated Image</h1>
   <img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif">
</body>
</html>

示例 3

我們可以使用樣式表更改動畫影像的高度和寬度。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p> dding Animated Images to the web page</p>
   <img src="https://tutorialspoint.tw/images/html.gif" height="200" width="200">
</body>
</html>

更新於: 02-09-2023

50K+ 瀏覽量

開啟您的 職業 生涯

完成課程，獲得認證

開始
廣告