纯css实现轮播图

实现效果：

html结构：

 <div class="bigbox">
        <ul class="f">
            <!-- 多放一张图片，为了实现无缝连接 -->
            <li><img src="./banner/1.jpg" alt=""></li>
            <li><img src="./banner/2.jpg" alt=""></li>
            <li><img src="./banner/3.jpg" alt=""></li>
            <li><img src="./banner/4.jpg" alt=""></li>
            <li><img src="./banner/5.jpg" alt=""></li>
            <li><img src="./banner/1.jpg" alt=""></li>
            <!-- <li><img src="./banner/2.jpg" alt=""></li> -->
        </ul>
    </div>

css样式代码！：

<style>
    /* 清除默认样式 */
    * {
        margin: 0;
        padding: 0;
    }

    /* 清除浮动 */
    .f::after {
        content: "";
        display: block;
        clear: both;
    }

    .bigbox {
        margin: 0 auto;
        width: 630px;
        height: 400px;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 使用定位 */
        position: relative;
    }

    .bigbox ul {
        width: 3780px;
          /* 清除ul默认样式 */
        list-style-type: none;
          /* 使用定位 */
        position: absolute;
        top: 0;
        left: 0;
        /* 使用动画函数 */
        animation: banner 10s linear infinite;
    }

    /* 鼠标移入暂停动画 */
    .bigbox ul:hover {
        animation-play-state: paused;
    }

    /* li标签左浮动，让li在同一行显示 */
    .bigbox ul li {
        width: 630px;
        float: left;

    }

    /* 图片标签设置同样大小 */
    .bigbox ul li img {
        width: 630px;
        height: 400px;
    }

    /* 动画函数 */
    @keyframes banner {
        0% {
            left: 0;
        }

        100% {
            left: -3150px;
        }
    }
</style>

这样子就实现了。

---

以上便是我的学习中用到的知识点，如果有错误的地方，请别骂我，可以告诉我，一起学习❥(^_-)