CSS：轮播图

完美轮播图实例：
部分代码——
<style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            font-size: calc(100vw / 750);
        }
        .swiper {
            width: 100vw;
            height: 280.3rem;
            overflow: hidden;
            margin-top: 20rem;
        }
        .swiper .swiper-img {
            width: 500vw;
            height: 280.3rem;
            display: flex;
            justify-content: space-around;
            animation: lunbo 8s infinite;
        }
        
        .swiper-img img {
            width: 100vw;
            height: 280.3rem;
        }
        @keyframes lunbo {
            /* 
                有几张图片就通过100 / 几，得到的值就可以写百分比
                表示第一张图停顿时间为20% 
            */
            0%,
            20% {
                transform: translateX(0);
            }
            /* 表示第一张图到第二张图的动画时间为5% */
            25%,
            45% {
                transform: translateX(-100vw);
            }
            50%,
            75% {
                transform: translateX(-200vw);
            }

            80%,
            95% {
                transform: translateX(-300vw);
            }
            /* 
                表示倒数第二张到最后一张图片的动画时间为5% 
            */
            100% {
                transform: translateX(-400vw);
            }
            /* 
                然后最后一张图和第一张图片一样，在当动画完成时，继续从第一张开始重复动画，又停顿在第一张图，
                所以看到的效果就是无间隙的轮播动画 
            */
        }
    </style>
<body>
    <div class="swiper">
        <div class="swiper-img">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </div>
</body>
posted on 2022-07-17 11:31 香香鲲阅读(105) 评论(0) 编辑收藏举报