HTML
<div class="mouse"></div>
SCSS
body {
background: #3e3e3e;
}
.mouse {
position: fixed;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
border: solid #fff 2px;
border-radius: 12px;
width: 24px; height: 40px;
animation: scrolldown 1s ease-in infinite alternate;
&:before {
position: absolute;
top: 5px; left: 50%;
margin-left: -1px;
width: 2px; height: 12px;
content: "";
background: #fff;
}
&:after {
position: absolute;
left: 50%; bottom: -40px;
margin-left: -20px;
width: 40px;
color: #fff;
font: 10px "AvenirNext-Heavy";
text-align: center;
content: "SCROLL";
animation: scrollup 1s ease-in infinite alternate;
}
}
@keyframes scrolldown {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 15px);
}
}
@keyframes scrollup {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -15px);
}
}