HTML无缝滚动图廊-CSDN博客

本文链接：https://blog.csdn.net/qq_19880197/article/details/86516283

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
    <ul>
        <li><img src="img/1.jpg" alt="" width="200"></li>
        <li><img src="img/2.jpg" alt="" width="200"></li>
        <li><img src="img/3.jpg" alt="" width="200"></li>
        <li><img src="img/1.jpg" alt="" width="200"></li>
        <li><img src="img/2.jpg" alt="" width="200"></li>
        <li><img src="img/3.jpg" alt="" width="200"></li>
        <li><img src="img/1.jpg" alt="" width="200"></li>
        <li><img src="img/1.jpg" alt="" width="200"></li>
        <li><img src="img/2.jpg" alt="" width="200"></li>
        <li><img src="img/3.jpg" alt="" width="200"></li>
        <li><img src="img/1.jpg" alt="" width="200"></li>
        <li><img src="img/2.jpg" alt="" width="200"></li>
        <li><img src="img/3.jpg" alt="" width="200"></li>
        <li><img src="img/1.jpg" alt="" width="200"></li>
        <!--本来是7个图片，想实现无缝滚动，相当于2组图片-->
    </ul>
</nav>
</body>
</html>

CSS部分

ul{
    list-style: none;
}
nav{
    width: 1400px;
    height: 150px;
    border:1px solid red;
    margin:100px auto;
    overflow: hidden; /*溢出的隐藏*/
}
nav ul li{
    float: left;
}
nav ul{
    width: 200%;
    /*宽度给2倍，因为2组图片，给一组图的宽度，剩下一组图会掉下去，显示两行，因为宽度不够*/
    animation: moving 5s  linear infinite;
    /*linear 匀速*/
}
@keyframes moving {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-1400px);
    }
}
nav:hover ul{
    animation-play-state: paused;/*鼠标经过暂停动画，一定是给ul加*/
}