0
点赞
收藏
分享

微信扫一扫

H3C交换机的40G堆叠线 ,可以插在普通光口做堆叠吗?

AbrahamW 2023-10-13 阅读 46

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);
  }
}

js

 

举报

相关推荐

0 条评论