无缝滚动：是两组拼在一起的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} div {
width: 300px;
height: 50px;
margin: 200px auto;
overflow: hidden;
} ul {
list-style: none;
width: 620px;
height: 50px;
animation: gun 3s infinite linear;
} li {
float: left;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font: 500 20px/50px "Microsoft YaHei UI";
} @keyframes gun {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-300px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li>无</li>
<li>缝</li>
<li>滚</li>
<li>动</li>
<li>效</li>
<li>果</li>
<li>无</li>
<li>缝</li>
<li>滚</li>
<li>动</li>
<li>效</li>
<li>果</li>
</ul>
</div>
</body>
</html>