css动画水球图

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

组件

1. <template>
2.   <div class="water-box">
3.     <div class="water">
4.       <div class="progress" :style="{ '--newProgress': newProgress + '%' }"></div>
5.       <div class="num">{
6.   
7.   { parseFloat(text).toFixed(2) + '%' }}</div>
8.     </div>
9.   </div>
10. </template>
11. <script>
12. export default {
13.   name: 'Water',
14.   props: {
15.     progress: {
16.       type: Number,
17.       default: 0
18.     },
19.     text: {
20.       type: Number,
21.       default: 0
22.     }
23.   },
24.   data() {
25.     return {
26.       newProgress: 0
27.     }
28.   },
29.   mounted() {
30.     this.newProgress = this.progress > 100 ? 100 : this.progress
31.   },
32.   watch: {
33.     progress(val) {
34.       this.newProgress = val > 100 ? 100 : val
35.     }
36.   }
37. }
38. </script>
40. <style scoped lang="scss">
41. .water-box {
42.   width: 100px;
43.   height: 100px;
44.   border-radius: 50%;
45.   border: 1px solid #4c5259;
46.   background: linear-gradient(180deg, #171c25 0%, #313741 49.79%, #171c25 100%);
47.   box-shadow: 0 2px 10px 0 rgba(255, 255, 255, 0.25);
48.   display: flex;
49.   align-items: center;
50.   justify-content: center;
51.   .water {
52.     position: relative;
53.     display: flex;
54.     justify-content: center;
55.     align-items: center;
56.     width: 87.5px;
57.     height: 87.5px;
58.     border-radius: 50%;
59.     &::after {
60.       content: '';
61.       position: absolute;
62.       left: 0;
63.       right: 0;
64.       bottom: 0;
65.       border: 1px solid #313741;
66.       background: linear-gradient(135deg, #04bdf8 30.52%, #01e7af 100%, #01e4b4 100%);
67.       border-radius: 50%;
68.       top: 0;
69.     }
70.     .progress {
71.       width: 100%;
72.       height: 100%;
73.       text-align: center;
74.       color: #fff;
75.       line-height: 125px;
76.       position: absolute;
77.       left: 0;
78.       top: 0;
79.       border-radius: 50%;
80.       z-index: 1;
81.       overflow: hidden;
82.       &::before,
83.       &::after {
84.         content: '';
85.         position: absolute;
86.         left: -50%;
87.         width: 200px;
88.         height: 200px;
89.       }
90.       &::before {
91.         background-color: #313741;
92.         opacity: 0.8;
93.         border-radius: 40% 30%;
94.         animation: rotate1 10s linear infinite;
95.       }
96.       &::after {
97.         background-color: #313741;
98.         opacity: 0.7;
99.         border-radius: 42% 40%;
100.         animation: rotate2 10s linear infinite;
101.       }
102.     }
103.     @keyframes rotate1 {
104.       0% {
105.         transform: rotate(0deg);
106.         bottom: var(--newProgress); /*控制进度*/
107.       }
108.       100% {
109.         transform: rotate(360deg);
110.         bottom: var(--newProgress);
111.       }
112.     }
113.     @keyframes rotate2 {
114.       0% {
115.         transform: rotate(45deg);
116.         bottom: var(--newProgress);
117.       }
118.       100% {
119.         transform: rotate(360deg);
120.         bottom: var(--newProgress);
121.       }
122.     }
123.     .num {
124.       z-index: 2;
125.       color: #fff;
126.       font-size: 18px;
127.       font-weight: 500;
128.     }
129.   }
130. }
131. </style>

复制代码

引用

1. <water
2.     :progress="66"
3.     :text="66"
4. />

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。