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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

这里是codepen

这里是我的fiddle

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

我想我的问题可能是在那里我把HTML代码动画的位置，但我想无处不在，不能得到它的工作。

我添加了一个网站的背景图片，以便大家可以看到。

回答：

您可以再补充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>

以上是 试图将滚动动画添加到我的网站 的全部内容， 来源链接： utcz.com/qa/259770.html

回到顶部