直接代码贴出来吧。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.myDiv {
width: 500px;
height: 200px;
margin: 20px auto;
overflow: hidden;
}
.container {
width: 500%;
animation: loop 10s linear infinite;
}
.container div {
width: 20%;
}
img {
width: 100%;
height: 200px;
}
@keyframes loop{
0% { margin-left: 0%; }
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="myDiv">
<div class="container">
<div class="fl">
<img src="image/1.jpg">
</div>
<div class="fl">
<img src="image/2.jpg">
</div>
<div class="fl">
<img src="image/3.jpg">
</div>
<div class="fl">
<img src="image/4.jpg">
</div>
<div class="fl">
<img src="image/1.jpg">
</div>
</div>
</div>
</body>
</html>
animation中之所以设置两个两个之间margin-left相等是为了实现“停顿”效果，看上去自然一些。
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
