走马灯图片循环播放
素材传不上来，要是有想实现效果的小伙伴，可以随便下载六张图片实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation</title>
<style>
.box {
margin: 50px auto;
width: 450px; /* 每次显示三张图片 */
height: 128px;
border: 2px solid rgb(57, 198, 245);
overflow: hidden;
}
img {
width: 150px; /* 每张图片宽度 */
}
ul {
margin: 0;
padding: 0;
}
.box li {
float: left;
list-style: none;
}
.box ul {
/* 所有图在一行排列 [150（每张图片宽度）*9 (9张图片)] linear:匀速*/
/* 原来的6张图片 + 补齐留白的3张*/
width: 1350px;
animation: move 6s infinite linear;
}
/* 鼠标移入box,动画暂停 */
.box:hover ul {
animation-play-state: paused;
}
@keyframes move {
to {
transform: translateX(-900px); /* 150 X 6 6张不同的图片*/
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./111.png" alt="" /></li>
<li><img src="./222.png" alt="" /></li>
<li><img src="./333.png" alt="" /></li>
<li><img src="./444.png" alt="" /></li>
<li><img src="./555.png" alt="" /></li>
<li><img src="./666.png" alt="" /></li>
<!-- 无缝动画：第456（显示区域能显示的图片数量，如3张）张图片移动时，显示区域不能留白 -->
<li><img src="./111.png" alt="" /></li>
<li><img src="./222.png" alt="" /></li>
<li><img src="./333.png" alt="" /></li>
</ul>
</div>
</body>
</html>
