【CSS】图片栏无缝滚动效果实现

效果图

思路分析：

第一步，定义div>ul>li*7,因为有7张图片。

第二步，设置div的宽度高度以及li的浮动，保证它们全部在div内的同一行。

第三步，实现滚动。用到了动画相关知识点，即

animation: move 5s linear infinite;
@keyframes move{
	 	from{
			transform: translateX(0);
		}
		to{
			transform: translateX(-882px);
		}
}

第四步，现在已经可以向左滚动了，但是问题是什么呢？“无缝”还没有实现，即向左滚动后原位置出现了空隙。解决办法就是复制相同的li内容添加在后面，为了避免出现两行，要把ul的宽度设置为200%。

第五步，最后一步，限制所有内容都在div内，所以添加overflow:hidden，大功告成。

完整源代码