Css3实现轮播图

html代码

 <div class="warp">
        <ul class="list">
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/1.jpg" alt=""></li>
        </ul>
    </div>

css样式

 *{
            margin: 0;
            padding: 0;
            
        }
        .warp{
            width: 200px;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;
        }
        ul{
            width: 800px;
            display: flex;
            list-style: none;
            /* infinite 永久循环 */
            animation: move 7s linear infinite;
        }
        li{
            width: 200px;
        }
        img{
            width: 100%;
            vertical-align: top;
        }

        @keyframes move{
            0%{
                transform:translateX(0%);
            }
            20%{
                transform:translateX(0%);
            }
            25%{
                transform:translateX(-200px);
            }
            45%{
                transform:translateX(-200px);
            }
            50%{
                transform:translateX(-400px);
            }
            70%{
                transform:translateX(-400px);
            }
            75%{
                transform:translateX(-600px);
            }
            95%{
                transform:translateX(-600px);
            }
            100%{
                transform:translateX(-800px);
            }

        }