轮播图效果

<style>
        @keyframes swiper {
            0%{transform: translateX(0);}
            28%{transform: translateX(0);}
            33%{transform: translateX(-300px);}
            61%{transform: translateX(-300px);}
            66%{transform: translateX(-600px);}
            95%{transform: translateX(-600px);}
            100%{transform: translateX(-900px);}
        }
        #box{width: 300px;
            height: 200px;
            border: 2px solid;
            overflow: hidden;
        }
        #box>div>div{
            width: 300px;
            height: 200px;
            font-size: 50px;
            text-align: center;
            line-height: 200px;
            float: left;
        }
        #box>div{
            width: 9999px;
            height: 200px;
            animation: swiper 10s linear infinite;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div style="background: lightblue;">1</div>
            <div style="background: lightpink;">2</div>
            <div style="background: lightgoldenrodyellow">3</div>
            <div style="background: lightblue;">1</div>
        </div>
    </div>
   
</body>
</html>
posted @ 2023-06-30 10:09  曾像夜那么黑  阅读(20)  评论(0)    收藏  举报