<div class="container">
<span class="circle">
<i class="arrow fa fa-arrow-down"></i>
</span>
<span class="pulse"></span>
</div>
* {
box-sizing: border-box;
}
.container {
height: 120px;
width: 120px;
margin: 3rem auto 0;
position: relative;
}
.circle {
background-color:#fff;
height: 120px;
width: 120px;
display: block;
border: 5px solid #00baff;
border-radius: 100px;
position: absolute;
bottom: 0;
z-index: 1;
animation-name:circle;
animation-duration:1s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;
}
.arrow {
font-size: 42px;
color: #00baff;
bottom: 27px;
position: absolute;
left: 50%;
margin-left: -18px;
animation-name:arrow;
animation-duration:1s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;
}
.pulse {
margin: 0 auto;
border-radius: 100px;
position: absolute;
left: 5px;
top: 5px;
z-index: 0;
opacity: 0;
width: 110px;
height: 110px;
border: 10px solid #00baff;
border-radius: 100px;
animation: pulse 1s linear infinite 0.3s;
}
@keyframes arrow
{
0% {bottom:0;}
75% {bottom:90px;}
100% {bottom:0;}
}
@keyframes circle
{
0% {height:120px;}
10% {height: 120px;}
50% {height: 130px;}
75% {height: 150px;}
90% {height: 130px;}
100% {height: 120px;}
}
@keyframes pulse {
0% {transform: scale(0); opacity: 0;}
8% {transform: scale(0); opacity: 0;}
15% {transform: scale(0.1); opacity: 1;}
30% {transform: scale(0.5); opacity: 1;}
100% {opacity: 0; transform: scale(1.5);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.