如何在 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>

更新時間：2023 年 9 月 2 日

50000+ 次瀏覽

開啟你的 事業

透過完成課程來獲得認證

開始
廣告
© . All rights reserved.