<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片或者文字无缝衔接循环滚动例子</title>
</head>
<body>
<div class="box">
<div class="box2">
<div class="box3">
君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
</div>
<div class="box3">
君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。
</div>
</div>
</div>
<style>
.box {
width:800px;
height: 100px;
margin: 0 auto;
overflow: hidden;
border: 1px solid black;
position: absolute;
}
.box2{
display: flex;
position: absolute;
animation: loop 10s linear infinite;
}
.box3 {
background:pink;
width:1000px;
height: 100px;
float:left;
}
@keyframes loop {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
</style>
</body>
</html>
