<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style >
*{
margin: 0;
padding: 0;
}
.wrap{
margin: auto;
width: 100px;
height: 100px;
border-radius: 50%;
border:1px solid #ccc;
position: relative;
overflow: hidden;
}
.water{
position: absolute;
top: 48%;
left: -30%;
width: 200px;
height: 200px;
border-radius: 25%;
background: #4876FF;
opacity: 0.5;
animation: wave 5s linear infinite;
}
.wrap .water:nth-child(2){
animation-delay:.1s;
background: #436EEE;
top: 50%;
left: -20%;
}
.wrap .water:nth-child(3){
animation-delay:.2s;
background:#3A5FCD;
top: 52%;
left: -10%;
}
.wrap .water:nth-child(4){
animation-delay:.3s;
background: #1C86EE;
top: 54%;
left: 0%;
}
@keyframes wave {
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<div class="wrap">
<div class="water"></div>
<div class="water"></div>
<div class="water"></div>
<div class="water"></div>
<div>
</body>
</html>
