CSS实现图片无缝无限循环展示效果

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

先看实际效果：

无限循环滚动的关键是确定宽图片的位置

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

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

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

<div class="slideshow">
   <div class="images">
      把图片放到这里面。
   </div>
</div>

.slideshow {
  position: relative;
  overflow: hidden;
}
.images {
  background: url(slideshow.jpg);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  animation: slideshow 10s linear infinite;
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}

性能优化

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

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

.images {
  ...
   
  /* hi 浏览器，使用你的GPU */
  transform: translate3d(0, 0, 0);
}

@keyframes moveSlideshow {  
  100% { 
    -webkit-transform: translateX(-200%);  
  }
}

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

增加更酷炫的效果

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

滚动速度变化
从黑白色变成彩色

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

.slideshow:hover .images {
  animation-duration: 5s;
}

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

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

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

<div class="slideshow">
   <div class="images-1">
     把你的图片放到这里。
   </div>
   <div class="images-2">
   </div>
</div>

.slideshow > div {
   ...

   transition: opacity 0.5s ease-out; 
    
   /* 慢 */
   animation: moveSlideshow 60s linear infinite;
    
   ...
}

.images-1 {
  /* 快 */
  animation: moveSlideshow 20s linear infinite;
}

.slideshow:hover .images-2 {
   opacity: 0;
}

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

.images-1 {
  /* Sprite */
  background-position: 0 200px;

  ...
}

这就是最终的成品！

阅读余下内容

标签：