超简单的纯CSS图⽚⽆缝循环⽅法
⾸先效果如下。
效果就是若⼲长图通过视⼝，并且第⼀张和最后⼀张要⽆缝衔接。
接着原理图如下。真的，超简单。。。
注意：第⼀张和最后⼀张必须要是同⼀张图，这样才能⽆缝衔接。
  　如果视⼝⼤于每张图⽚，那就有必要第1，2甚⾄3张和倒数第3，2，1张相同，这样才能在视⼝⼤于图⽚的情况下完成完成衔接。　
  　从右往左滚动，或者垂直⽅向滚动效果稍加变动代码即可实现。
代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS图⽚⽆缝循环</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 229px;
height: 149px;
margin: 0px auto;
border: 2px solid #000;
overflow: hidden;
}
.box ul{
margin-top: 10px;
width: 1145px;
height: 129px;
animation: move linear 5s infinite;
}
.box li {
width: 229px;
height: 129px;
float: right;
list-style: none;
}
@keyframes move {
0%{
html滚动效果代码
transform: translateX(-916px);//
}
100%{
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="marvel_fans/img/dm_pic01.jpg" alt=""/></li>        <li><img src="marvel_fans/img/dm_pic02.jpg" alt=""/></li>        <li><img src="marvel_fans/img/dm_pic03.jpg" alt=""/></li>        <li><img src="marvel_fans/img/dm_pic04.jpg" alt=""/></li>
<li><img src="marvel_fans/img/dm_pic01.jpg" alt=""/></li>    </ul>
</div>
</body>
</html>
刚接触前端不久⼩⽩⼀枚，若有问题请指出不甚感激。