CSS实现图片无缝无限循环展示效果 – WEB骇客

只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。

先看实际效果：

首先，这个图片的设计需要有一点技巧，就是它的首位部分是相同重复的，上面的演示里使用的图片是下面这幅：

滚动的过程是变换图片的left位置，直到图片完整的展示一个循环(事实上是移动到看起来是一个循环)，然后立刻将left值调整到最初的位置，开始下一次循环。

我们只需要在外面给图片包个东西，挡住图片多出的内容，里面的容器元素来执行动画效果。

上面的代码已经能很好的工作了，但如果你的机器配置不高，或浏览器不够先进，可能出现一些性能问题。事实上，我们可以通过使用translateX来代替left达到激发让浏览器使用3D变换动用GPU来提供性能。

注意：2D变换和opacity值变化并不会带来这种性能变化，如果不使用 translateX ，就不能从GPU上获得任何好处。

我并不是特别喜欢用这样的小伎俩来让浏览器提升性能，但作为CSS开发者，这种技巧很常见。

除了让图片无限循环滚动展示外，我们还要增加一些特效：

对于速度的调整，我们只需要修改duration值：

但这样会引起图片位置的跳动！ 修改动画的duration会产生一个新的timeline，一些属性的值会相应的调整，结果是，它并不是在当前位置开始加速减速。这个问题目前还没有想到什么好方法。

这里我们使用了另外一种方法。我们制作了两行图片，一个运动快，一个运动慢，一个显示，一个隐藏，当需要速度变化时，互换它们的显示属性。

这样就产生了一个相对平滑的切换过程。

为了节省带宽，我们将黑白图片和彩色图片合成到了一起。

这就是最终的成品！