SOURCE

<h1>纯CSS实现轮播图</h1>
<div class="swiper-container">
    <ul class="swiper-list">
        <li class="swiper-item">
            <div class="content">
                <h3>标题</h3>
                <hr />
            </div>
        </li>
    
        <li class="swiper-item">
           <div class="content">
                <h3>标题</h3>
                <hr />
            </div>
        </li>
        <li class="swiper-item">
             <div class="content">
                <h3>标题</h3>
                <hr />
            </div>
        </li>
          <li class="swiper-item">
          <div class="content">
                <h3>标题</h3>
                <hr />
            </div>
        </li>

        <li class="swiper-item">
            <div class="content">
                <h3>标题</h3>
                <hr />
            </div>
        </li>
    </ul>
</div>

<style>
    *{
        margin:0;
        padding:0;
    }
    .swiper-container{
        width:450px;
        height:300px;
        margin:auto;
        border:1px solid black;
        overflow:hidden;
    }
    .swiper-list{
        width:calc(450px * 5);
        height:100%;
        list-style:none;
        border:1px solid black;
        animation: swiper 10s infinite;
    }
     .swiper-item{
        display: flex;
        justify-content: center;
        width:450px;
        height:100%;
        float:left;
        align-items: center;
     }
     .swiper-item:nth-child(1){
         background-color:red;
     }
      .swiper-item:nth-child(2){
         background-color:green;
     }
      .swiper-item:nth-child(3){
         background-color:pink;
     }
      .swiper-item:nth-child(4){
         background-color:yellow;
     }
     .swiper-item:nth-child(5){
         background-color:blue;
     }


     @keyframes swiper{
        0%,20%{
             margin-left:calc(-450px * 0);
        }
        20%,25%{
            margin-left:calc(-450px * 1);
        }
        25%,40%{
            margin-left:calc(-450px * 1);
        }
        40%,45%{
            margin-left:calc(-450px * 2);
        }
        45%,60%{
            margin-left:calc(-450px * 2);
        }
        60%,65%{
            margin-left:calc(-450px * 3);
        }
        65%,80%{
            margin-left:calc(-450px * 3);
        }
        80%,85%{
            margin-left:calc(-450px * 4);
        }
        85%,95%{
            margin-left:calc(-450px * 4);
        }
        95%,100%{
            margin-left:calc(-450px * 0);
        }

     }
</style>