css3 简单循环滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes lbody {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -520px, 0); //滚动内容div高度和
}
}
.box{
800px;
border: 1px solid #000000;
position: absolute;
height: 500px;
overflow: hidden;
}
.box .lbody{
animation: 15s lbody linear infinite normal;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="lbody">
<div><img width="800" height="100" style="background-color: #0002ff"></div>
<div><img width="800" height="100" style="background-color: #00fff7"></div>
<div><img width="800" height="100" style="background-color: #4bff00"></div>
<div><img width="800" height="100" style="background-color: #ffe500"></div>
<div><img width="800" height="100" style="background-color: #ff0900"></div>
<div><img width="800" height="100" style="background-color: #0002ff"></div>
<div><img width="800" height="100" style="background-color: #00fff7"></div>
<div><img width="800" height="100" style="background-color: #4bff00"></div>
<div><img width="800" height="100" style="background-color: #ffe500"></div>
<div><img width="800" height="100" style="background-color: #ff0900"></div>
</div>
</div>
</body>
</html>