网站如何实现LOGO墙跑马灯效果？

外贸建站中少不了有一些成功案例logo墙展示，因此直接平铺会显得平白无趣，若是增加一点动画效果则会有意想不到的效果，比如Logo墙的跑马灯效果滚动，那如何来实现呢？

其实实现该功能的方法有很多，除了常见的使用 translate3d，还有其他几种方法可以实现跑马灯效果。以下是一些常见的方法：

使用 animation 和 @keyframes

这是最常见的方法，正如我在上一个回答中所展示的。通过定义一个动画，你可以控制图片在容器中的移动方式。

使用 transform: translateX() 和 transition

如果你想要更简单的滚动效果，可以使用 transition 属性来实现平滑的移动。这种方法通常用于单次滚动，而不是无限循环。

.marquee img {
  transition: transform 15s linear;
  transform: translateX(100%);
}

.marquee:hover img {
  transform: translateX(-100%);
}

在这个例子中，当鼠标悬停在 .marquee 容器上时，图片会开始滚动。

使用 position: absolute 和 left

你可以使用 position: absolute 和 left 属性来手动控制图片的位置，并通过JavaScript来更新 left 的值，从而实现滚动效果。

function scrollMarquee() {
  var marquee = document.querySelector('.marquee');
  var img = marquee.querySelector('img');
  var pos = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (pos == -img.width) {
      pos = marquee.offsetWidth; // 当图片完全移出容器时，重置位置
    } else {
      pos--;
    }
    img.style.left = pos + 'px';
  }
}

window.onload = scrollMarquee;

使用 background-position 和 animation

如果你想要在背景图片上实现跑马灯效果，可以使用 background-position 和 animation。

.marquee {
  width: 100%;
  height: 200px;
  background-image: url('your-image-url.jpg');
  background-repeat: no-repeat;
  animation: scroll-background 15s linear infinite;
}

@keyframes scroll-background {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

在这个例子中，背景图片会水平滚动。

使用 clip-path

clip-path 属性可以用来裁剪元素的可见部分，结合动画，可以实现跑马灯效果。

.marquee img {
  animation: scroll-clip 15s linear infinite;
}

@keyframes scroll-clip {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(-100% 0, 100% 0, 100% 100%, -100% 100%);
  }
}

在这个例子中，clip-path 的变化会创造出图片滚动的效果。

展示实例效果

这些方法各有优缺点，你可以根据自己的需求和喜好选择合适的方法来实现跑马灯效果。