css动画水球图

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

展示效果

组件

<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>

引用