<html lang="en">
<head>
<style>
.one {
position: absolute;
width: 500px;
height: 400px;
overflow: hidden;
}
.one_cantent img {
width: 500px;
height: 300px;
float: left;
}
.one_cantent {
width: 2500px;
height: 400px;
position: absolute;
left: 0px;
animation-name: move;
animation-duration: 10s;
}
@keyframes move {
0% {
left: 0px;
}
25% {
left: -500px;
}
50% {
left: -1000px;
}
75% {
left: -1500px;
}
100% {
left: -2000px
}
}
</style>
</head>
<body>
<div class="one">
<div class="one_cantent">
<a href="image/1.jpg" target="_blank">
<img src="image/1.jpg">
</a>
<a href="image/2.jpg" target="_blank">
<img src="image/2.jpg">
</a>
<a href="image/3.jpg" target="_blank">
<img src="image/3.jpg">
</a>
<a href="image/4.jpg" target="_blank">
<img src="image/4.jpg">
</a>
<a href="image/5.jpg" target="_blank">
<img src="image/5.jpg">
</a>
</div>
</div>
</body>
</html>
<head>
<style>
.one {
position: absolute;
width: 500px;
height: 400px;
overflow: hidden;
}
.one_cantent img {
width: 500px;
height: 300px;
float: left;
}
.one_cantent {
width: 2500px;
height: 400px;
position: absolute;
left: 0px;
animation-name: move;
animation-duration: 10s;
}
@keyframes move {
0% {
left: 0px;
}
25% {
left: -500px;
}
50% {
left: -1000px;
}
75% {
left: -1500px;
}
100% {
left: -2000px
}
}
</style>
</head>
<body>
<div class="one">
<div class="one_cantent">
<a href="image/1.jpg" target="_blank">
<img src="image/1.jpg">
</a>
<a href="image/2.jpg" target="_blank">
<img src="image/2.jpg">
</a>
<a href="image/3.jpg" target="_blank">
<img src="image/3.jpg">
</a>
<a href="image/4.jpg" target="_blank">
<img src="image/4.jpg">
</a>
<a href="image/5.jpg" target="_blank">
<img src="image/5.jpg">
</a>
</div>
</div>
</body>
</html>
