水球展示——微信小程序

html

 完成率{{list.finish}}%

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

获取数据赋值就行