此示例仅提供思路，距正式使用还有距离：
div画圆形，设置蓝色背景，然后使用after,before画两个圆，然后旋转起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水波纹球</title>
<style>
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.water {
background-color: #00a2e4;
margin: 10% 40%;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: inset 0 0 30px 0px rgba(0, 0, 0, .7), 0 0px 20px 0 rgba(0, 0, 0, .8);
overflow: hidden;
transform: rotate(180deg);
}
.water:before,
.water:after {
content: '';
width: 300px;
height: 300px;
display: block;
position: absolute;
left: -100%;
border-radius: 44%;
/*改变此百分比实现用量的剩余情况*/
top: 80%;
}
.water:before {
background: rgba(255, 255, 255, .7);
animation: wave 10s linear infinite;
}
.water:after {
background: rgba(255, 255, 255, .3);
animation: wave 16s linear infinite;
}
@keyframes wave {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="water"></div>
</body>
</html>