【CSS】使用CSS实现一个简单的轮播图效果 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        .swiper-container {
            width: 590px;
            height: 470px;
            margin: 0 auto;
            overflow: hidden;
        }

        .swiper-container img {
            width: 590px;
            height: 470px;
        }

        .swiper-slide {
            float: left;
        }

        .swiper-wrapper {
            width: 999999px;
            animation:move 13s linear infinite;
        }
        /*鼠标放上去暂停*/
        .swiper-wrapper:hover{
            animation-play-state: paused;
        }

        @keyframes move {
            0% {
                transform: translateX(0);
            }
            5% {
                transform: translateX(-590px);
            }
            25% {
                transform: translateX(-590px);
            }
            30%{
                transform: translateX(-1180px);
            }
            50%{
                transform: translateX(-1180px);
            }
            55%{
                transform: translateX(-1770px);
            }
            75%{
                transform: translateX(-1770px);
            }
            80%{
                transform: translateX(-2360px);
            }
            100%{
                transform: translateX(-2360px);
            }

        }
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img
                src="https://img10.360buyimg.com/babel/s1180x940_jfs/t1/136259/34/27831/98600/629cc5beEb69cf894/017b48049a9dda34.jpg.webp"
                alt=""></div>
        <div class="swiper-slide"><img
                src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/71827/17/18389/98649/62964230E36433f89/1afba0f65d99bbde.jpg.webp"
                alt=""></div>
        <div class="swiper-slide"><img
                src="https://img13.360buyimg.com/pop/s1180x940_jfs/t1/118931/23/25982/63763/628da1d2Ed4d31b51/16c8badce8a564ec.jpg.webp"
                alt=""></div>
        <div class="swiper-slide"><img
                src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/39656028211/FocusFullshop/CkNqZnMvdDEvMTIwOTQzLzQvMjgyMDQvMjQwOTQ4LzYyOWQwNTliRWY4MWJhMThiL2JmNWQ1MzYzZDdkNjMyYzYucG5nEgkzLXR5XzBfNTQwAjjui3pCFgoS6ZK755-z5LiW5a626ZK75oiSEABCEwoP5L2g5YC85b6X5oul5pyJEAFCEAoM56uL5Y2z5oqi6LStEAJCCgoG5Yqb6I2QEAdYs_C73ZMB/cr/s/q.jpg"
                alt=""></div>
<!--  为了实现无缝轮播，第一张和最后一个相同      -->
        <div class="swiper-slide"><img
                src="https://img10.360buyimg.com/babel/s1180x940_jfs/t1/136259/34/27831/98600/629cc5beEb69cf894/017b48049a9dda34.jpg.webp"
                alt=""></div>
    </div>
</div>
</body>
</html>

posted @ 2022-06-06 09:50  木子欢儿  阅读(510)  评论(0)  编辑  收藏  举报