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开发者,这种技巧很常见。

增加更酷炫的效果

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

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

对于速度的调整,我们只需要修改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;

  ...
}

这就是最终的成品!

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号