CSS
body {
height: 100vh;
background-color: skyblue;
background-image:
linear-gradient(
rgba(0,200,255,0.2),
rgba(255,255,255,0)
);
overflow: hidden;
}
.wave,
.wave::before,
.wave::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 250vw;
height: 250vw;
margin-left: -125vw;
transform-origin: 50% 50%;
background-image:
linear-gradient(
rgba(150, 255, 255, 0.5),
rgba(440, 240, 100, 0.5)
);
border-radius: 38% 42%;
box-shadow: inset 0 0 10vw rgba(255, 255, 255, 0.5);
animation: spin 16s infinite linear;
}
.wave::before {
width: 105%;
height: 95%;
margin-top: -125vw;
transform-origin: 49% 51%;
background-image:
linear-gradient(
rgba(155, 280, 150, 0.5),
rgba(280, 500, 255, 0.5)
);
border-radius: 40% 38%;
animation: spin 13s infinite linear;
}
.wave::after {
width: 102%;
height: 98%;
margin-top: -125vw;
transform-origin: 51% 49%;
background-image:
linear-gradient(
rgba(100,240,150,0.5),
rgba(80,200,255,0.5)
);
border-radius: 48% 42%;
animation: spin 10s infinite linear;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
