纯CSS实现轮播图

纯CSS实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>

        .wrap-container{
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            overflow: hidden;

        }
        .innder-container{
            position: absolute;
            top: 0;
            left:0;
            width: 500%;
            height: 100%;
            font-size: 0;
            transform: translate(0,0); 
            animation: loop 10s linear infinite;


        }
        img{
            width: 500px;
            height: 300px;  
        }

        @keyframes loop{
            0% {transform: translate(0,0);}
            15% {transform: translate(0,0);} /* 停留1500ms */

            20%{transform: translate(-20%,0);}
            35% {transform: translate(-20%,0);} /* 停留1500ms */

            40%{transform: translate(-40%,0);}
            55% {transform: translate(-40%,0);} /* 停留1500ms */

            60%{transform: translate(-60%,0);}
            75% {transform: translate(-60%,0);} /* 停留1500ms */


            80%{transform: translate(-80%,0);}
            95% {transform: translate(-80%,0);} /* 停留1500ms */

            100%{transform: translate(0,0)}

        }
        @-moz-keyframes loop{
            0% {transform: translate(0,0);}
            15% {transform: translate(0,0);} /* 停留1500ms */

            20%{transform: translate(-20%,0);}
            35% {transform: translate(-20%,0);} /* 停留1500ms */

            40%{transform: translate(-40%,0);}
            55% {transform: translate(-40%,0);} /* 停留1500ms */

            60%{transform: translate(-60%,0);}
            75% {transform: translate(-60%,0);} /* 停留1500ms */


            80%{transform: translate(-80%,0);}
            95% {transform: translate(-80%,0);} /* 停留1500ms */

            100%{transform: translate(0,0)}

        }
        @-o-keyframes loop{
            0% {transform: translate(0,0);}
            15% {transform: translate(0,0);} /* 停留1500ms */

            20%{transform: translate(-20%,0);}
            35% {transform: translate(-20%,0);} /* 停留1500ms */

            40%{transform: translate(-40%,0);}
            55% {transform: translate(-40%,0);} /* 停留1500ms */

            60%{transform: translate(-60%,0);}
            75% {transform: translate(-60%,0);} /* 停留1500ms */


            80%{transform: translate(-80%,0);}
            95% {transform: translate(-80%,0);} /* 停留1500ms */

            100%{transform: translate(0,0)}

        }

        @-webkit-keyframes loop{
            0% {transform: translate(0,0);}
            15% {transform: translate(0,0);} /* 停留1500ms */

            20%{transform: translate(-20%,0);}
            35% {transform: translate(-20%,0);} /* 停留1500ms */

            40%{transform: translate(-40%,0);}
            55% {transform: translate(-40%,0);} /* 停留1500ms */

            60%{transform: translate(-60%,0);}
            75% {transform: translate(-60%,0);} /* 停留1500ms */


            80%{transform: translate(-80%,0);}
            95% {transform: translate(-80%,0);} /* 停留1500ms */

            100%{transform: translate(0,0)}

        }
    
    
    
    </style>
</head>
<body>



    <div class="wrap-container">
        <div class="innder-container">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
        </div>
    </div>
    
</body>
</html>

 

 

posted @ 2019-01-24 13:36  巨兽~墨菲特  阅读(212)  评论(0)  编辑  收藏  举报