Ripple Effect

Ripple Effect

.planet{
width:50px;
height:50px;
position:relative;
}
.planet .planet-icon{
border-radius: 50%;
width:40px;
height:40px;
overflow:hidden;
}
.planet .planet-icon img{
border-radius: 50%;

background-color:#cc0000;
}
.ripples {
position: absolute;
top: 0;
right: 0;
bottom:0;
left:0;
}
.ripples span {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
border: 1px solid #168dc5;
opacity: 0;
}
.ripples span:nth-child(1) {
animation:ripples 4s 1s linear infinite;
}
.ripples span:nth-child(2) {
animation:ripples 4s 2s linear infinite;
}
.ripples span:nth-child(3) {
animation:ripples 4s 3s linear infinite;
}
.ripples span:nth-child(4) {
animation:ripples 4s 4s linear infinite;
}
@keyframes ripples{
0% {
opacity: 0;
transform: scale(0.8);
}
33% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.8);
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *