标签：float one line alt text img body auto jpg
首先效果如下。
效果就是若干长图通过视口，并且第一张和最后一张要无缝衔接。
接着原理图如下。真的，超简单。。。
注意：第一张和最后一张必须要是同一张图，这样才能无缝衔接。
如果视口大于每张图片，那就有必要第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%{ transform: translateX(-916px);// } 100%{ transform: translateX(0px); } } </style> </head> <body> <div class="box"> <ul> <li><img src="marvel_fans/img/dm_pic01.jpg" /></li> <li><img src="marvel_fans/img/dm_pic02.jpg" /></li> <li><img src="marvel_fans/img/dm_pic03.jpg" /></li> <li><img src="marvel_fans/img/dm_pic04.jpg" /></li> <li><img src="marvel_fans/img/dm_pic01.jpg" /></li> </ul> </div> </body> </html>
刚接触前端不久小白一枚，若有问题请指出不甚感激。
标签：float one line alt text img body auto jpg
原文地址：http://www.cnblogs.com/zyhua1122/p/6752760.html
