一个简单的纯css轮播图（超级简单）

本文链接：https://blog.csdn.net/qq_45059845/article/details/106893262

废话不多说先上图：
轮播图1
轮播图2
说一说原理吧
让五张图片向左浮动展示。所以只需要左移ul的left值即可。使用animation，每隔几秒切换一下left的位置。
然后给动画加上重复播放，实现循环播放。
美中不足就是没有小白点
因为刚刚学习了3个月
还是小白还有好多不懂得东西

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯css轮播图</title>
    <!-- 导入css样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <!--主体部分 -->
    <div class="main">
        <ul>
            <li>
                <a href="#"> <img src="img/img-1.jpg" alt=""></a>
            </li>
            
            <li>
                <a href="#"> <img src="img/img-2.jpg" alt=""></a>
            </li>
            
            <li>
                <a href="#"> <img src="img/img-3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"> <img src="img/img-4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"> <img src="img/img-5.jpg" alt=""></a>
            </li>
        </ul>


    </div>
</body>

</html>

CSS部分：

* {
    margin: 0;
    padding: 0;
}


/* 清除li样式 */

li {
    list-style: none;
}


/* 创建动画 */

@keyframes dh {
    0%,
    20% {
        margin-left: 0px;
    }
    25%,
    40% {
        margin-left: -1200px;
    }
    45%,
    60% {
        margin-left: -2400px;
    }
    65%,
    80% {
        margin-left: -3600px;
    }
    85%,
    100% {
        margin-left: -4800px;
    }
}

.main {
    margin: 100px auto;
    width: 1200px;
    height: 375px;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 边框圆角 */
    border-radius: 20px;
}

ul {
    width: 6000px;
    animation: dh 10s linear infinite;
}

ul li {
    float: left;
}