<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
.water-waves{
margin:0 auto;
overflow:hidden;
position: relative;
width:100px;
height:100px;
border-radius:50%;
border:1px solid silver;
text-align:center;
line-height:50px;
animation:water-waves linear infinite;
}
.water-wave1{
position: absolute;
top:40%;
left:-25%;
background:#33cfff;
opacity: 0.7;
width:200%;
height:200%;
border-radius:40%;
animation: inherit;
animation-duration:5s;
}
.water-wave2{
position: absolute;
top:45%;
left:-35%;
background:#0eaffe;
opacity: 0.5;
width:200%;
height:200%;
border-radius:35%;
animation: inherit;
animation-duration:7s;
}
.water-wave3{
position: absolute;
top:50%;
left:-35%;
background:#0f7ae4;
opacity: 0.3;
width:200%;
height:200%;
border-radius:33%;
animation: inherit;
animation-duration:11s;
}
@keyframes water-waves{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<div class="water-waves">
<div class="water-wave1"></div>
<div class="water-wave2"></div>
<div class="water-wave3"></div>
</div>
</body>
</html>
