html中如何让图滚循环动

在HTML中，要实现图片滚动循环动效，可以使用marquee标签或者CSS3动画，下面我将详细介绍这两种方法，帮助大家轻松实现图片滚动循环的效果。

方法一：使用marquee标签

marquee标签是HTML中的一个滚动字幕标签，可以轻松实现图片的滚动效果，以下是一个简单的示例：

Markup

<marquee behavior="scroll" direction="left" scrollamount="5">
    <img src="image.jpg" alt="滚动图片" />
</marquee>

在这段代码中，behavior 属性表示滚动方式，scroll 表示循环滚动；direction 属性表示滚动方向，left 表示从右向左滚动，也可以设置为right、up 或down；scrollamount 属性表示滚动速度，数值越大速度越快。

以下是详细步骤：

1、准备一张图片，将其命名为image.jpg，并放在与HTML文件同一目录下。

2、在HTML文件中，添加上述marquee标签代码。

3、保存HTML文件，并在浏览器中打开，即可看到图片滚动循环的效果。

方法二：使用CSS3动画

CSS3动画功能强大，可以实现更丰富的滚动效果，以下是一个使用CSS3动画实现图片滚动循环的示例：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .scroll-container {
            width: 300px;
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .scroll-image {
            width: 600px; /* 图片宽度为容器宽度的两倍 */
            height: 150px;
            position: absolute;
            animation: scroll-loop 5s linear infinite;
        }
        @keyframes scroll-loop {
            0% {
                left: 0;
            }
            100% {
                left: -300px; /* 图片滚动一个容器宽度的距离 */
            }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-image">
            <img src="image.jpg" alt="滚动图片" />
        </div>
    </div>
</body>
</html>