文章/答案/技术大牛

发布

社区首页 >问答首页 >Gatsbyjs页面类似徽标灰色旋转木马

问Gatsbyjs页面类似徽标灰色旋转木马
EN

Stack Overflow用户

提问于 2021-08-05 17:04:20

回答 1查看 45关注 0票数 0

我可以知道怎么做这样的旋转木马吗？这是自动播放流畅不停止，当它悬停时暂停。它看起来非常轻巧和小巧。

这里的链接是：https://www.gatsbyjs.com/

carousel

javascript

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-06 08:54:16

你可以简单地使用纯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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68670802

复制

相似问题

问Gatsbyjs页面类似徽标灰色旋转木马
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Gatsbyjs页面类似徽标灰色旋转木马EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Gatsbyjs页面类似徽标灰色旋转木马
EN