先看一下效果,波浪的大小会根据数值的变化而不断变化
html代码(这里只写和波浪球相关的代码)
<view class="charging-ball-container">
<view class="wave-wrapper" style="bottom:{{percent}}%"></view>
<view class="percent-txt">{{percent}}%</view>
</view>
css代码
.charging-ball{
position: relative;
align-items: center;
width: 350rpx;
height: 350rpx;
border-radius: 50%;
background-color: #12FFBE;
overflow: hidden;
border: 8rpx solid #c6ffed;
z-index: 100;
}
.wave-wrapper {
position: absolute;
left: 50%;
width: 700rpx;
height: 700rpx;
background-color: #fff;
border-radius: 50%;
/* 动画完成花费的时间 */
animation-duration: 5s;
animation-name: rotate;
/* 无限次播放动画 */
animation-iteration-count: infinite;
/* 动画从头到尾的速度是相同的 */
animation-timing-function: linear;
}
.percent-txt{
position: absolute;
z-index: 200;
left: 35%;
top: 40%;
color: #fff;
font-size: 76rpx;
font-weight: 500;
}
/* 过渡动画 */
@keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -1%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0) rotateZ(360deg);
}
}
js代码
js中的代码很少,就是定义了一个百分比的数字
data: {
orderId: 0,
percent: 55
},