css 水位图带波动

这个效果没有canvas 好，但速度快。特别是一个页面有很多个图的时候。
修改 top 就可以修改水位高度

<div class="water" style="top:20%"></div>

<html>
<style>
.water-container {
  box-sizing:border-box;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  
}
.water {
  box-sizing:border-box;
  position: absolute;
  top: 20%; 
  width: 100%;
  height: 100%;
  background: rgba(0, 150, 255, 0.7);

}

.water::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0%;
  left: -50%;
  background: rgba(0, 150, 255, 0.3);
  border-radius: 45%;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
<body>
<div class="water-container">
  <div class="water" style="top:20%"></div>
</div>
</body>
</html>

原理：
after 是个椭圆在指定位置旋转，看起来就像是水波。
你也可以让 water 也旋转起来，这样就更像是水波了。
我是为了让水位看起来更准确，没有让 water转起来。

css 水位图 带波动

推荐阅读更多精彩内容

css 水位图带波动