css进阶 | 实现罐子中的水流搅拌效果

前提：

在要实现可视化施肥机的罐中搅拌的水纹效果时，罐子的水位高度根据后台数据变化而改变，

当开启施肥时，管道开始输水，罐中效果要有水纹波动。

实现思路：

1.罐中水位高度可根据百分比来控制

2.搅拌时的水纹波动：可以让UI出一张不规则的实心圆（如下图），使用绝对定位+溢出隐藏将图片放在罐子合适的位置，再让不规则的实心圆进行旋转

实现代码：

1.结构布局

water-box：作为水流效果的容器，限制水流图片的显示范围
water-flow：实际承载水流动画的元素
条件渲染：通过 v-if="tank.stirring" 控制只有在搅拌状态下才显示水流效果

2. 动态定位机制

垂直定位：使用 bottom: tank.level-25 + '%' 属性，使水流效果跟随当前液体高度变化
计算逻辑：通过 tank.level-25 调整水流位置，确保水流始终在液体表面附近

3. 视觉呈现

图片动画 ：使用 flow-image 类配合CSS中的 rotateFlow 动画实现旋转效果

html 复制代码

 <view class="tank-body">
            <view class="tank-level" :style="{ height: tank.level-30 + '%' }">
            </view>
            <!-- 水流效果 -->
            <view class="water-box">
              <view class="water-flow" v-if="tank.stirring" :style="{bottom: tank.level-25 + '%'}">
                <image src="@/static/images/fertilizer/fert-flow.png" class="flow-image"></image>
              </view>
            </view>
            
              <view class="stirring-blades"></view>
            </view> -->
            <view class="tank-type">{{ tank.statusText }}</view>
          </view>
         
        </view>
        <view class="tank-controls">
          
        </view>
      </view>

css样式：

css 复制代码

.tank-body {
  width: 260rpx;
  height: 400rpx;
  background-image: url('@/static/images/fertilizer/fert-box.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 将液体层从底部开始填充 */
  align-items: center;
}

.tank-level {
  position: absolute;
  bottom: 0;
  left: 22px;
  width: 68%;
  background: linear-gradient(to top, #1d53a3, #42d9e0);
  margin-bottom: 10rpx;
  transition: height 0.5s ease;
  border-radius: 0 0 50rpx 50rpx;
  overflow: hidden;
  z-index: 10;
}
.water-box{
  position: absolute;
  left: 22px;
  width: 68%;
  height: 75%;
  overflow: hidden;
  z-index: 9;
}
.water-flow {
  position: absolute;
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.flow-image {
  position: absolute;
  width: 110px;
  height: 110px;
  animation: rotateFlow 5s linear infinite;
  left: -15px;
  top:47px;
  transform-origin: center center;
}

/* 旋转动画 */
@keyframes rotateFlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

实现效果：

搅拌的带有水纹波动效果