水球展示——微信小程序

news2025/11/4 19:28:17

html

     <view class="water">
        <view class="text">
          完成率{{list.finish}}%
        </view>
        <view class="img" style="height: {{list.finish}}%">
          <image src="../../image/water.jpg" mode="" />
          <image src="../../image/water2.jpg" mode="" />
          <image src="../../image/water.jpg" mode="" />
          <image src="../../image/water2.jpg" mode="" />
        </view>
      </view>

less

// 水球样式
.water {
  margin-top: 20rpx;
  border: 2px solid #45affa;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  position: relative;

  // 球内文字
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
    text-align: center;
    color: rgb(255, 123, 0);
  }
// 波浪
  .img {
    display: flex;
    justify-content: start;
    width: 300%;
    background-color: #0096ff;
    //控制完成率显示 定义到行内样式动态修改
    height: 1%;
    position: absolute;
    bottom: 0;
    animation: water 2s linear infinite;

    image {
      width: 100%;
      height: 20rpx;
    }
  }
}

// 水波动画
@keyframes water {
  0% {
    transform: translateX(-300rpx);
  }

  100% {
    transform: translateX(-0rpx);
  }
}