Question

我想像https://stripe.com/us/customers中那样为徽标制作动画。

也许动画不晃动。但是圆圈必须转到左侧，然后再次产生到右侧。我看到div必须超过屏幕尺寸（在该网站上它的分辨率为3000px）。我没有任何代码，但是欢迎任何想法

如果有js代码，我该如何使用React

Answer 1

如果您想要一个简单，快速的纯CSS解决方案：
创建带有所有徽标的图像。使它成为一个不错的徽标网格，以便可以水平重复图像。对背景位置进行动画处理。

@keyframes scrollbg {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1500px, 0, 0); /* width of the image */
  }
}

.banner-wrapper {
  overflow: hidden;
}

.banner {
  height: 300px;
  width: 4500px;
  background: url("https://picsum.photos/g/1500/300?image=2") repeat-x;
  animation: scrollbg 35s linear infinite;
}

<section class="banner-wrapper">
  <div class="banner"></div>
</section>

按照“条纹/客户”中的徽标制作动画

1 个答案: