Hello, World!
.wave-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
animation: ripple 1s linear infinite;
}
@keyframes ripple {
0% {
opacity: 0;
width: 0;
height: 0;
}
50% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}