CSS
.scroll{
width: 30px;
height: 50px;
position: absolute;
bottom: 50%;
left: 50%;
cursor: pointer;
margin-top: -25px;
margin-left: -15px;
}
.scroll .mouse{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
border: 2px solid #272727;
border-radius: 20px;
}
.scroll .wheel{
width: 4px;
height: 4px;
top: 10px;
left: 50%;
position: absolute;
background: #272727;
display: block;
border-radius: 50%;
margin-left: -2px;
animation-name: scroll-wheel;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes scroll-wheel{
from{
transform: translate3d(0, 0, 0);
opacity: 1;
}
to{
transform: translate3d(0, 10px, 0);
opacity: 0;
}
}
