无缝滚动（纯css+html）
无缝滚动是动画的一个基础运用，也常用，简单分享下。
代码部分
/*首先需要一个小构思，整体框架我选用的是 ui li标签*/
<style>
*{
margin: 0; /*习惯上首先清楚边距*/
padding: 0;
}
.main{
width:500px; /*对外部大盒子的一个定义*/
height:200px;
background-color: #000000; /*背景设置*/
margin:300px; /*根据情况调整距离*/
overflow: hidden; /*作用为和盒子外的图片隐藏不显示（与display：none有本质区别）*/
}
.main ul{
list-style: none; /*作用为清楚表单前的小浮点*/
width:200%; /*使ul长度为一组图片的两倍，使之可存放两组图片，是实现无限滚动的关键*/
animation: go 15s linear infinite; /* 对动画的命名 周期设置 速度运动曲线 以及循环次数*/
}
.main li{
float:left; /* 使表单列浮动为一行，排列于盒子中*/
}
@keyframes go{
from{
transform: translateX(0);} /*动画定义：作用为使图片进行水平距离的进行运动 （距离自定义）*/
to{
transform: translateX(-500px);}
}
.main:hover ul{
animation-play-state: paused; /*作用为使鼠标移到ul标签上时，动画停止播放*/
}
</style>
</head>
<body>
<div class="main">
<ul>
/* 图片的宽度与长度随着自己盒子设置的大小自定义*/
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
/* --------------我是可爱的分界线--将图片分为两组------------------*/
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
<li><img src="../image/post1.jpg" width="100px" height="200px"/ ></li>
</ul>
</div>
</body>
注意：将图片分为两组，每组的总宽度正好是一个盒子的总宽度。
原因是：一组图片当然可以实现动画的滚动效果，但是在这一组图片均完全实现平行移动距离后，会循环回原地再次进行循环滚动，但是在这个循环的交界处会出现空白与停顿，显得不够流畅；
所以可以在这一组图片的后面同样设置一组相同图片，只是就需要设置ul 标签的宽度为原来盒子宽度的两倍，设置为200%即可，这样就可以实现无缝衔接了。
结尾
不足之处，还请斧正！