css实现无限轮播-css(5)

主要知识点:

animation

纯css实现无间隙轮播图效果，鼠标悬停后可暂停

demo 请在chrome下预览（未写兼容性）

html文件

 <div class="carousel-box">
        <div class="inner">
            <a href="">第一页</a>
            <a href="">第二页</a>
            <a href="">第三页</a>
            <a href="">第四页</a>
            <a href="">第一页</a>
        </div>
    </div>

css主要内容

  .carousel-box{
            width: 300px;  height: 200px; /*等于a内容宽高*/
            margin: 10px auto;
            overflow: hidden;
            position: relative;
        }
        .carousel-box:hover .inner{
            animation-play-state: paused;
        }
        .inner{
            position: absolute;
            top:0;
            left: 0;
            overflow: hidden;
            animation: top 12s linear infinite ;
        }
        @keyframes top { /*a内容高的倍数*/
            0%,3%{top:0;}
            25%,31%{top:-200px;}
            50%,56%{top:-400px;}
            75%,81%{top:-600px;}
            97%,100%{top:-800px}
        }
        .carousel-box:hover .inner-r{
            animation-play-state: paused;
        }
        .inner-r{
            position: absolute;
            top:0;
            left: 0;
            width: 1500px; /*a内容宽的倍数*/
            overflow: hidden;
            animation: left 12s linear infinite ;
        }
        .inner-r a{float: left;}
        @keyframes left { /*a内容宽的倍数*/
            0%,3%{left:0;}
            25%,31%{left:-300px;}
            50%,56%{left:-600px;}
            75%,81%{left:-900px;}
            97%,100%{left:-1200px}
        }