css动画水球图

由于echarts水球图动画会导致ios卡顿，所以纯css模拟

展示效果

组件

javascript 复制代码

<template>
  <div class="water-box">
    <div class="water">
      <div class="progress" :style="{ '--newProgress': newProgress + '%' }"></div>
      <div class="num">{
  
  { parseFloat(text).toFixed(2) + '%' }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Water',
  props: {
    progress: {
      type: Number,
      default: 0
    },
    text: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      newProgress: 0
    }
  },
  mounted() {
    this.newProgress = this.progress > 100 ? 100 : this.progress
  },
  watch: {
    progress(val) {
      this.newProgress = val > 100 ? 100 : val
    }
  }
}
</script>

<style scoped lang="scss">
.water-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #4c5259;
  background: linear-gradient(180deg, #171c25 0%, #313741 49.79%, #171c25 100%);
  box-shadow: 0 2px 10px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  .water {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 87.5px;
    height: 87.5px;
    border-radius: 50%;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid #313741;
      background: linear-gradient(135deg, #04bdf8 30.52%, #01e7af 100%, #01e4b4 100%);
      border-radius: 50%;
      top: 0;
    }
    .progress {
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      line-height: 125px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      z-index: 1;
      overflow: hidden;
      &::before,
      &::after {
        content: '';
        position: absolute;
        left: -50%;
        width: 200px;
        height: 200px;
      }
      &::before {
        background-color: #313741;
        opacity: 0.8;
        border-radius: 40% 30%;
        animation: rotate1 10s linear infinite;
      }
      &::after {
        background-color: #313741;
        opacity: 0.7;
        border-radius: 42% 40%;
        animation: rotate2 10s linear infinite;
      }
    }
    @keyframes rotate1 {
      0% {
        transform: rotate(0deg);
        bottom: var(--newProgress); /*控制进度*/
      }
      100% {
        transform: rotate(360deg);
        bottom: var(--newProgress);
      }
    }
    @keyframes rotate2 {
      0% {
        transform: rotate(45deg);
        bottom: var(--newProgress);
      }
      100% {
        transform: rotate(360deg);
        bottom: var(--newProgress);
      }
    }
    .num {
      z-index: 2;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }
  }
}
</style>

引用

javascript 复制代码

<water
    :progress="66"
    :text="66"
/>