animation实现轮播图

第一步定义html结构

<div class="imgs">
    <img src="./imgs/204071.jpg" alt="">
    <img src="./imgs/493016.png" alt="">
    <img src="./imgs/810967.jpg" alt="">
    <img src="./imgs/974914.png" alt="">
    <img src="./imgs/974921.png" alt="">
</div>

第二部定义css样式

<style>
        @keyframes bannerMove {
            0% {
                opacity: 0;
                z-index: 2;
            }
            5% {
                opacity: 1;
                z-index: 2;
            }
            20% {
                opacity: 1;
                z-index: 2;
            }
            25% {
                opacity: 1;
                z-index: 0;
            }
            50% {
                opacity: 0;
                z-index: 0;
            }
            100% {
                opacity: 0;
                z-index: 0;
            }
        }
        
        .imgs {
            position: relative;
            left: 25%;
            transition: opacity 0.5s ease 0s;
        }
        
        .imgs>img {
            position: absolute;
            width: 800px;
            height: 450px;
            margin: auto;
            animation-name: bannerMove;
            animation-duration: 20s;
            animation-timing-function: step-end;
            animation-iteration-count: infinite;
        }
        
        .imgs>img:nth-of-type(2) {
            animation-delay: 4s;
        }
        
        .imgs>img:nth-of-type(3) {
            animation-delay: 8s;
        }
        
        .imgs>img:nth-of-type(4) {
            animation-delay: 12s;
        }
        
        .imgs>img:nth-of-type(5) {
            animation-delay: 16s;
        }
    </style>

第三，实现效果如下图: