CSS3无缝轮播效果

来源：互联网发布：淘宝网服装货源编辑：程序博客网时间：2024/05/18 23:12

animation动画
animation-play-state: paused;//暂停

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS3实现无缝滚动</title><style>    *{margin:0;padding:0;list-style:none;}    img{width:300px;height:200px;display:block;}    .box{width:900px;height:200px;margin:100px auto 0;border:1px solid red;position: relative;overflow:hidden;}    ul{position: absolute;width:9999px;left:0;top:0;        -moz-animation: move 4s linear 0s infinite;    }    ul:hover{        -moz-animation-play-state: paused;    }    li{width:300px;height:200px;float:left;}    /* 定义一个动画 */    @-moz-keyframes move{        from{            left:0;        }        to{            left:-1800px;        }    }</style></head><body>    <div class="box">        <ul>            <li><img src="img/01.jpg" alt=""></li>            <li><img src="img/02.jpg" alt=""></li>            <li><img src="img/03.jpg" alt=""></li>            <li><img src="img/04.jpg" alt=""></li>            <li><img src="img/01.jpg" alt=""></li>            <li><img src="img/02.jpg" alt=""></li>            <li><img src="img/03.jpg" alt=""></li>            <li><img src="img/04.jpg" alt=""></li>          </ul>    </div></body></html>

效果如下：
CSS3无缝轮播效果

阅读全文

0 0