CSS实现图片无限循环的效果

边城小书童
2,404 阅读2分钟

最近最到一个需求，要实现一个logo墙无限滚动的效果, 一开始实现思路不对，通过去修改背景图的background-position，性能非常差，后来在网上看到这篇文章CSS实现图片无缝无限循环展示效果,才明白，原来一点也不难，只是思路不太对。

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

首先，这个图片的设计需要有一点技巧，就是它的首尾部分是相同重复的, 这里准备了一张图片( www.webhek.com/wordpress/w… )。 滚动的过程就是变换图片的left位置，直到图片完整地展示一个循环（事实上是移动到看起来是一个循环），然后立刻将left值调整到最初的位置，开始下一次循环。

给外层一个容器，用来遮挡多出来的内容

    <div class="container">
        <div class="inner"></div>
    </div>

给外层容器添加一点样式

.container {
    max-width: 800px;
    height: 200px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
    // 让浏览器开启GPU加速
    transform: transform3d(0, 0, 0);
}

给内层容器设置样式，使用background-image的方式来添加图片。

.inner{
    width: 2526px; // 图片的大小
    height: 100%; // container的高度
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('./imgs/collage.jpg');
}

目前的效果如图所示：

image.png

接下来，我们要让图片动起来，我们先设置一个keyframes

@keyframes move {
    100% {
        // 当图片移动到最末尾时，就立刻移动到图片1/3处，重新进入下一轮循环
        transform: translateX(-66.66%);
    }
}

设置好keyframe，然后我们将其运用在inner容器中：

.inner {
    width: 2526px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backgroud-image: url('./imgs/collage.jpg');
    animation: move 60s linear 0s infinite;
    // 开启GPU加速
    transform: translate3d(0, 0, 0);
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="inner"></div>
  </div>
</body>
</html>

.container {
  max-width: 800px;
  height: 200px;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
  margin: 50px auto;
  transform: translate3d(0, 0, 0)
}

.inner {
  width: 2526px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('./imgs/collage.jpg');
  animation: move 60s linear 0s infinite;
  transform: translate3d(0, 0, 0);
}

.inner:hover {
  background-position: left bottom;
}

@keyframes move {
  100% {
    transform: translateX(-66.6666%);
  }
}

最终效果如下：

参考文章：
CSS实现图片无缝无限循环展示效果

avatar
文章
阅读
粉丝