炫意html5
最早CSS3和HTML5移动技术网站之一

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;
...
}

这就是最终的成品!

炫意HTML5 » CSS实现图片无缝无限循环展示效果

Java基础教程Android基础教程