如何在 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.com/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.com/images/html.gif" height="200" width="200">
</body>
</html>

更新时间：2023 年 9 月 2 日

50000+ 次浏览

开启你的 事业

通过完成课程来获得认证

开始
广告
© . All rights reserved.