HTML 如何在页面中使用动画图片

如何在HTML页面中使用动画图片

在HTML中,动画图片是网页上的一种移动的图片。它以GIF格式,即图形交换格式文件形式存在。

我们需要使用 <image>标签 和 **src ** 属性来在HTML中添加一个动画图片。其中, src 属性添加了图片的URL(文件目标)。

此外,我们还可以使用 heightwidth 属性来设置图片的高度和宽度。

如何在HTML页面中使用动画图片?

语法

<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>

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程