<div class="arrow"></div>
<!-- <span class="arrowAni">up</span> -->
html,body{
background-color: #000;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.arrow{
position:relative;
width:30px;
height: 30px;
cursor:pointer;
/* border:solid 1px white; */
transition:0.5s;
overflow:hidden;
}
.arrow:hover{
/* animation:borderAni 5s cubic-bezier(0, 0.6, 1, 0.4); */
border:solid 2px white;
border-radius:50%;
}
.arrow:after{
position:absolute;
display:block;
content:"";
color:white;
width: 20px;
height: 15px;
/* border:solid 1px; */
top:-1px;
border-bottom:solid 2px;
transform:translatex(4px);
}
.arrow:before{
position:absolute;
display:block;
content:"";
color:white;
width: 8px;
height: 8px;
/* border:solid 1px; */
border-top:solid 2px;
border-left:solid 2px;
top:50%;
left:2px;
transform-origin:0% 0%;
transform:rotatez(-45deg);
}
.arrow:hover:before{
animation: aniArrow01 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
.arrow:hover:after{
animation: aniArrow02 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
@keyframes aniArrow01 {
0% {
transform:rotatez(-45deg) translateY(30px) translateX(30px);
}
100% {
transform: rotatez(-45deg) translateY(-35px) translateX(-35px);
}
}
@keyframes aniArrow02 {
0% {
transform:translateX(45px);
}
100% {
transform:translateX(-44px);
}
}
@keyframes borderAni{
0% {
border:solid 2px white;
}
100% {
border:solid 2px white;
border-radius:50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.