CSS3新特性之animation纯CSS实现轮播图

jiezi

6 年前

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    <body >

        <div class="swiper-wrap">
            <ul class="swiper-img">
                这里的 <!----> 是为了消除每个 li 换行所带来的间距问题
                <li><img src="./images/1.jpg" alt="" /></li><!--
                --><li><img src="./images/2.jpg" alt="" /></li><!--
                --><li><img src="./images/3.jpg" alt="" /></li><!--
                --><li><img src="./images/4.jpg" alt="" /></li><!--
                --><li><img src="./images/5.jpg" alt="" /></li><!--
                --><li><img src="./images/6.jpg" alt="" /></li>
            </ul>
           

        </div> 
        
        <script src="./js/index.js"></script>
    </body>
</html>

body{
    padding: 0;
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
}
.swiper-wrap{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.swiper-wrap li{display: inline-block;}
.swiper-wrap .swiper-img{
    width: 600%;
    height: 100%;
    border: 1px solid darkcyan;
}
.swiper-wrap .swiper-img li{width: calc(100%/6);
    height: 100%;
}
.swiper-wrap .swiper-img li img{
    width: 100%;
    height: 100%;
}

/* 切换 */
.swiper-img{animation: swiper 12s linear infinite;}
@keyframes swiper{0% { margin-left: 0%;}
    9.1% {margin-left: 0%;}
    18.2% {margin-left: -100%;}
    27.3% {margin-left: -100%;}
    36.4% {margin-left: -200%;}
    45.5% {margin-left: -200%;}
    54.6% {margin-left: -300%;}
    63.7% {margin-left: -300%;}
    72.8% {margin-left: -400%;}
    81.9% {margin-left: -400%;}
    91% {margin-left: -500%;}
    100% {margin-left: -500%;}

}

CSS3新特性之animation纯CSS实现轮播图

HTML:

CSS: