Rumah > Artikel > hujung hadapan web > css如何滚动图片

css如何滚动图片

藏色散人asal: 2021-01-28 10:41:128578semak imbas

css滚动图片的方法：首先设置主体代码各处两组一样的图片；然后设置nav的大小和ul大小；接着定义动画，并增加鼠标悬停和动画暂停的效果；最后给nav增加“overflow:hidden”使得超出的部分隐藏即可。

css如何滚动图片

本教程操作环境：windows7系统、HTML5&&CSS3版本，DELL G3电脑。

推荐：css视频教程

首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度。

这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。

具体步骤如下：

1、设置主体代码各处两组一样的图片

<nav>
  <ul>
<li>
  <img src="image/1.jpg" alt=""></li>
<li>
  <img src="image/2.jpg" alt=""></li>
<li>
  <img src="image/3.jpg" alt=""></li>
<li>
  <img src="image/4.jpg" alt=""></li>
<li>
  <img src="image/5.jpg" alt=""></li>
<li>
  <img src="image/6.jpg" alt=""></li>
  </ul>
</nav>

2、设置nav的大小，宽度为一组图片相加的宽度，高度为图片的高度。

nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
}

3、设置ul大小，宽度为nav的两倍，高度与nav相同，并指定动画相关属性

ul {
     width: 200%;
     height: 100%;
     animation: picmove 5s linear infinite forwards;
        }

4、定义动画，主要是向左移动一组图片的长度

@keyframes picmove {
        from {
             transform: translate(0);
           }
           to {
            transform: translate(-750px);
        }
    }

5、增加鼠标悬停，动画暂停的效果

ul:hover {
            animation-play-state: paused;
        }

6、最后给nav 增加 overflow：hidden 使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了

整体代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }
        
        @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }
        
        img {
            width: 250px;
            height: 170px;
            float: left;
        }
        
        ul:hover {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/5.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
        </ul>
    </nav>
</body>
</html>

效果图：

Atas ialah kandungan terperinci css如何滚动图片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 循环 overflow ul

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：vs2010 如何支持css3Artikel seterusnya：怎么下载网页的css文件

Artikel berkaitan

Lihat lagi