使用css3和html5实现轮播

    .boss {
        position: relative;
        width: 400px;
        height: 200px;
        background-color: antiquewhite;
        margin: 100px auto;
        overflow: hidden;
    }
    .box {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: box 10s infinite ease-out;
    }
    @keyframes box {
        0% {
            transform: translateX(-100%);
        }
        25% {
            transform: translateX(-200%);
        }
        50% {
            transform: translateX(-300%);
        }
        75% {
            transform: translateX(-400%);
        }
        100% {
            transform: translateX(-500%);
        }
    }
    .box1 {
        background-color: aqua;
        left: 100%;
    }
    .box2 {
        background-color: yellowgreen;
        left: 200%;
    }
    .box3 {
        background-color: purple;
        left: 300%;
    }
    .box4 {
        background-color: green;
        left: 400%;
    }
    .box5 {
        background-color: brown;
        left: 500%;
    }
</style>

<div class="boss">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
</div>