我制作了一个滚动下拉动画按钮,但是动画不起作用。我不知道哪里出了问题。我尝试使用-webkit-animation: sdb10 2s infinite
和animation: sdb10 2s infinite
,但看起来没有效果。
.scrolldown span {
position: absolute;
top: 0;
width: 30px;
height: 50px;
border: 2px solid #1F1F1F;
border-radius: 50px;
box-sizing: border-box;
}
.scrolldown {
position: fixed;
width: 30px;
height: 75px;
bottom: -25px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.scrolldown span::before {
position: absolute;
top: 10px;
left: 50%;
content: '';
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #1F1F1F;
border-radius: 100%;
-webkit-animation: sdb10 2s infinite;
animation: sdb10 2s infinite;
box-sizing: border-box;
}
.scrolldown span::after {
position: absolute;
bottom: -20px;
left: 50%;
width: 18px;
height: 18px;
content: '';
margin-left: -9px;
border-left: 2px solid #1F1F1F;
border-bottom: 2px solid #1F1F1F;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb05 1.5s infinite;
animation: sdb05 1.5s infinite;
box-sizing: border-box;
}
<div class="scrolldown">
<span></span>
</div>