HTML:

<div class="arrow">
<span></span>
<span></span>
<span></span>
</div>


CSS:

body {
background-color: #322B2B;
}

.arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
cursor: pointer;
}

.arrow span {
display: block;
width: 1.5vw;
height: 1.5vw;
border-bottom: 5px solid white;
border-right: 5px solid white;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
animation-delay: -0.4s;
}

@keyframes animate {
0% {
opacity: 0;
transform: rotate(45deg) translate(-20px, -20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
}
1 176 0
Без комментариев...