CSS3新特性之animation

原创

发布日期: 2019-09-27

阅读时长: 2 分

阅读次数:

HTML

<!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>

CSS

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%;}

}