Question

我正在尝试将此动画（在codepen上）添加到网站中。我似乎可以让它出现。单独它工作正常，但当我尝试将其添加到我的网站时，它不会显示。我希望它位于背景图像底部的中间位置。

以下是 codepen

这是 fiddle

<div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>

我认为我的问题可能是我放置动画的html代码的位置，但我到处尝试，无法让它工作。

我在网上添加了背景图片，以便你们可以看到。

Answer 1

您只需将fixed添加到叠加层即可将滚动图标保留在原位，也可以在滚动时将其隐藏

.scroll-downs {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #000;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #000;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

<div class="scroll-downs">
  <div class="mousey">
    <div class="scroller"></div>
  </div>
</div>

试图将滚动动画添加到我的网站

1 个答案: