利用动画效果实现无缝滚动

因为比较简单，所以废话少说，直接上代码
css样式：

<style>
		.nav img {
			width: 260px;
			height: 150px;
		}

		.nav ul {
			list-style: none;
			width: 200%;
			height: 150px;
			animation: go 3s linear infinite;
		}

		.nav {
			width: 1040px;
			height: 150px;
			overflow: hidden;
			margin: 50px auto;
		}

		.nav li {
			float: left;
		}

		@keyframes go {
			0% {
				transform: translate(0);
			}

			100% {
				transform: translate(-1040px);
			}
		}
	</style>

HTML：

<div class="nav">
		<ul>
			<li><img src="images/f1.jpg" alt=""></li>
			<li><img src="images/f2.jpg" alt=""></li>
			<li><img src="images/f3.jpg" alt=""></li>
			<li><img src="images/f4.jpg" alt=""></li>
			<li><img src="images/f1.jpg" alt=""></li>
			<li><img src="images/f2.jpg" alt=""></li>
			<li><img src="images/f3.jpg" alt=""></li>
			<li><img src="images/f4.jpg" alt=""></li>
		</ul>
	</div>

唯一需要注意的地方是图片宽度和盒子宽度要计算好就行了