css3实现无缝滚动效果

主页 M

css3实现无缝滚动效果

2020-06-08 网页编程网 网页编程网

<style>
*{margin:0;padding: 0;}
li{list-style: none;}
.banner-wrap{
    position: relative;
    margin:0 auto;
    width:2000px;
    height:900px;
}
ul{
    position: absolute;
    top:0;
    left:0;
    width: 2000px;
    height: auto;
    background-color: pink;
    animation: run 9s infinite;
}
li{
    float: left;
    width:600px;
    height:600px;
    background-size:600px 900px;
}
li:nth-child(1){
background-image: url('1.jpg');
}
li:nth-child(2){
background-image: url('2.jpg');
}
li:nth-child(3){
background-image: url('3.jpg');
}
li:nth-child(4){
background-image: url('4.jpg');
}
li:nth-child(5){
background-image: url('5.jpg');
}
li:nth-child(6){
background-image: url('6.jpg');
}
li:nth-child(7){
background-image: url('7.jpg');
}
li:nth-child(8){
background-image: url('8.jpg');
}
li:nth-child(9){
background-image: url('9.jpg');
}
li:nth-child(10){
background-image: url('10.jpg');
}
@keyframes run{
    0%{
        left: 0;
    }
    35%{
        left: -500px;
    }
    70%{
        left: -1000px;
    }
    100%{
        left: -1500px;
    }       
}
ul:hover{
    animation-play-state: paused;
}
</style>
    </head>
    <body>
        <div class="banner-wrap">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>           
        </ul>
        </div>
    </body>

阅读原文

阅读 3494

123 显示电脑版