Gatsbyjs 页面相似标志灰色轮播

Question

请问这样的轮播怎么做？这是不间断的自动播放，悬停时暂停。它看起来非常轻便和简约。

这个link是：https://www.gatsbyjs.com/

Answer 1

您可以简单地使用纯 CSS 和 HTML 来做到这一点，不需要 JavaScript，此示例应用于选取框跨度文本，但您可以对任何内容使用相同的方法你想要动画。

我已经为您创建了一个演示，请查看。

.gatsbyjsSlider {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #eee;
  padding: 5px;
}

.gatsbyjsSlider .items {
  display: inline-block;
  padding-left: 100%;
  animation: gatsbyjsSlider 50s linear infinite;
}

.gatsbyjsSlider .items:hover {
  animation-play-state: paused
}

/* Make it move */
@keyframes gatsbyjsSlider {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 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">
    <title>Gatsbyjs Slider</title>
</head>
<body>
    <div class="gatsbyjsSlider">
        <div class="items">
            <!-- Put your image that contain all logos-->
            <img src="https://images.ctfassets.net/vkdbses00qqt/6gYYhIZTJq0VHl3tXT8oPC/18d49aaa1fd3fed25b6b6593350897b7/homepage-used-by-logos__2_.png?w=1731&h=24&q=80&fit=fill" alt="Image">
        </div>
    </div>
</body>
</html>

Gatsbyjs 页面相似标志灰色轮播

Gatsbyjs page alike logo grey carousel

javascript

css

carousel