您的位置：首页 > Web前端 > CSS

CSS3无缝轮播效果

2017-07-06 10:12 399 查看

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>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航