css怎么做水位高度,CSS3 水位上升（注水）动画

要设置水位高度，可以使用CSS的伪元素和transform属性来实现。

首先，可以使用一个带有border-radius属性的div来制作圆形水池，例如：

<div class="water-tank"></div>

.water-tank {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  position: relative;
}

然后，可以使用伪元素来制作水面，例如：

.water-tank::before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: #66ccff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

这样就可以得到一个水位在50%的水池。如果想要制作水位上升（注水）动画，可以使用CSS3的动画来实现。例如：

.water-tank::before {
  /* 省略其他属性 */
  animation: fill 2s ease-out forwards;
}

@keyframes fill {
  from {
    height: 0;
  }
  to {
    height: 50%;
  }
}

这样就可以实现一个在2秒内水位从0上升到50%的动画效果。其中，animation属性指定动画名称、时长、缓动函数和结束后的状态，fill关键字表示动画结束后保持最终状态不变。@keyframes规则用来定义动画的关键帧，from表示动画开始时的状态，to表示动画结束时的状态。