CSS3无缝轮播效果

最新推荐文章于 2024-08-24 16:38:53 发布

xyphf_和派孔明

最新推荐文章于 2024-08-24 16:38:53 发布

阅读量4.8k

点赞数 2

分类专栏： HTML5 文章标签： css3 动画

本文链接：https://blog.csdn.net/xyphf/article/details/74521706

版权

HTML5 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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>