<style>
html {
height: 100vh;
}
body {
height: inherit;
background: #2e576b;
display: -ms-grid;
display: grid;
}
.container {
margin: auto;
}
.card {
position: relative;
width: 300px;
height: 350px;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 15px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.card::after {
content: '';
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));
}
.wave {
position: absolute;
top: 3%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
background: #0af;
border-radius: 40%;
opacity: .4;
animation: shift 3s infinite linear;
}
.wave.w2 {
background: yellow;
opacity: .1;
animation: shift 7s infinite linear;
}
.wave.w3 {
animation: shift 5s infinite linear;
background: crimson;
opacity: 0.1;
}
@-webkit-keyframes shift {
from {
transform: rotate(360deg);
}
}
@keyframes shift {
from {
transform: rotate(360deg);
}
}
</style>
<div class="container">
<div class="card">
<div class="wave w1"></div>
<div class="wave w2"></div>
<div class="wave w3"></div>
</div>
</div>