style.css

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1d1e2c;
}

.wave{
    height: 306px;
    width: 306px;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(60deg);
}

.wave span{
    position: absolute;
    display: block;
    border: 3px solid #00802A;
    border-radius: 50%;
    box-shadow: 0 5px 0 #014d1a;
    animation: animate 3s ease-in-out infinite;
}

@keyframes animate {
    0%,100%{
        transform:translateZ(-100px);
    }
    50%{
        transform: translateZ(100px);
    }
}

.wave span:nth-child(1), .wave span:nth-child(5), .wave span:nth-child(9), .wave span:nth-child(13) {
    border-color: #F8F2FF;
    box-shadow: 0 5px 0 #c5c2c9;
}
.wave span:nth-child(2), .wave span:nth-child(6), .wave span:nth-child(10), .wave span:nth-child(14) {
    border-color: #3FC1C9;
    box-shadow: 0 5px 0 #339da3;
}
.wave span:nth-child(3), .wave span:nth-child(7), .wave span:nth-child(11), .wave span:nth-child(15) {
    border-color: #FC5185;
    box-shadow: 0 5px 0 #c53963;
}
.wave span:nth-child(4), .wave span:nth-child(8), .wave span:nth-child(12), .wave span:nth-child(16) {
    border-color: #5d23a4;
    box-shadow: 0 5px 0 #4b247a;
}

.wave span:nth-child(1){
    inset: 0;
    animation-delay: 1.6s;
}
.wave span:nth-child(2){
    inset: 10px;
    animation-delay: 1.5s;
}
.wave span:nth-child(3){
    inset: 20px;
    animation-delay: 1.4s;
}
.wave span:nth-child(4){
    inset: 30px;
    animation-delay: 1.3s;
}
.wave span:nth-child(5){
    inset: 40px;
    animation-delay: 1.2s;
}
.wave span:nth-child(6){
    inset: 50px;
    animation-delay: 1.1s;
}
.wave span:nth-child(7){
    inset: 60px;
    animation-delay: 1s;
}
.wave span:nth-child(8){
    inset: 70px;
    animation-delay: 0.9s;
}
.wave span:nth-child(9){
    inset: 80px;
    animation-delay: 0.8s;
}
.wave span:nth-child(10){
    inset: 90px;
    animation-delay: 0.7s;
}
.wave span:nth-child(11){
    inset: 100px;
    animation-delay: 0.6s;
}
.wave span:nth-child(12){
    inset: 110px;
    animation-delay: 0.5s;
}
.wave span:nth-child(13){
    inset: 120px;
    animation-delay: 0.4s;
}
.wave span:nth-child(14){
    inset: 130px;
    animation-delay: 0.3s;
}
.wave span:nth-child(15){
    inset: 140px;
    animation-delay: 0.2s;
}
.wave span:nth-child(16){
    inset: 150px;
    animation-delay: 0.1s;
}