动画轮播效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
@keyframes lun {
0%,20% { transform:translate(0px); }
25%,40% { transform:translate(-600px); }
45%,60% { transform:translate(-1200px); }
65%,80% { transform:translate(-1800px); }
}
@-webkit-keyframes lun{
0%,20% { transform:translate(0px); }
25%,40% { transform:translate(-600px); }
45%,60% { transform:translate(-1200px); }
65%,80% { transform:translate(-1800px); }
}
#div1 {
position: absolute;
width: 600px;
height: 300px;
overflow: hidden;
border-radius:5px;
}
#tu img {
float: left;
width:600px;
height:300px;
}
#tu {
position: absolute;
width: calc(600px * 4);
}
.move{
animation:20s;
-webkit-animation: lun 20s ease 2s infinite normal;
}
</style>
</head>
<body>
<div id="div1">
<div id="tu" class="move">
<img src="images/ad1.jpg">
<img src="images/ad2.jpg">
<img src="images/ad3.jpg">
<img src="images/ad4.jpg">
</div>
</div>
</body>
</html>
