用@keyframe实现图片轮播

通过keyframe实现4张图片轮播

通过无序列表放置5张图片，第5张和第1张相同，使当第4张播放时后方不会出现空白

每个li放置一张，li浮动，使图片位于一行，超出框子的隐藏（框子设置overflow:hidden;）

通过ul向左移动，第四张移出后返回原位，再次重复移动，实现轮播的效果

未隐藏时效果图

<!DOCTYPE html>
<html lang="en">
<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>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /* 轮播框子设置宽为图片宽度，高为图片高*/
        .box1{
            width: 300px;
            height: 200px;
            margin: 100px 0 0 100px;
            border: 1px solid black;
            position: relative;
            /* 超出框架范围的图片隐藏掉 */
            overflow: hidden;
            float: left;
        }
        ul宽度为5张图片宽度，高为图片高
        .box1 ul{
            width: 1500px;
            height: 200px;
            position: relative;
            animation: lp 4s infinite;
        }
        /* 左浮动，使图片位于一行 */
        .box1 ul li{
            float: left;
        }
        /* 图片宽，高 */
        .box1 img{
            width: 300px;
            height: 200px;
        }
        /* 每25%移动一张图片宽度的距离 */
        @keyframes lp{
            0%{left: 0;}
            25%{left: -300px;}
            50%{left: -600px;}
            75%{left: -900px;}
            100%{left: -1200px;}
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li><img src="imgs/pic1.jpg" alt=""></li>
            <li><img src="imgs/pic2.jpg" alt=""></li>
            <li><img src="imgs/pic3.jpg" alt=""></li>
            <li><img src="imgs/pic4.jpg" alt=""></li>
            <!-- 第5张和第一张相同 -->
            <li><img src="imgs/pic1.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

来源：CSDN

作者：星星的泪痕

链接：https://blog.csdn.net/x311609001028/article/details/103898582

标签

轮播