<div class="box">
<div class='wave one'></div>
<div class='wave two'></div>
</div>
body{
background:#455A64;
}
.box{
height: 60vh;
width: 60vh;
overflow: hidden;
margin: 5vh;
background: #B2EBF2;
position:relative;
border-radius: 5%;
box-shadow: 2px 2px 30px -7px #1d1e22;
}
.wave {
position:absolute;
opacity: .6;
width: 150%;
height: 150%;
top:50%;
left:-10vh;
transform: translate(-50%,50%);
}
.wave.one{
background: yellow;
border-radius: 44%/45%;
animation: drift 6s infinite alternate;
}
.wave.two{
background: #2196f3;
border-radius: 70%/63%;
animation: drift 8s infinite alternate;
}
@keyframes drift {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes drift2 {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.