只是想练练手, 看看能不能实现在页面上放置一个能无限循环滚动的图片横幅. 事实证明, 这并不是很难.
先看实际效果:
无限循环滚动的关键是确定宽图片的位置
首先, 这个图片的设计需要有一点技巧, 就是它的首位部分是相同重复的, 上面的演示里使用的图片是下面这幅:
滚动的过程是变换图片的 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;
- ...
- }
这就是最终的成品!
来源: http://www.webhek.com/post/infinite-all-css-scrolling-slideshow.html