水波波动效果实现,复制查看效果
wxml
<view class="circle">
<view class="positionNumber">
<view>60%</view>
<view>匹配指数</view>
</view>
<view class="wave"></view>
</view>
wxss
.positionNumber{
position: absolute;
top: 30rpx;
left: 0;
right: 0;
margin: auto;
z-index: 9;
text-align: center;
}
.positionNumber>view:nth-child(1){
font-size: 30rpx;
font-weight: bold;
color: #555FF2;
}
.positionNumber>view:nth-child(2){
font-size: 17rpx;
color: #999;
}
.circle {
width: 153rpx;
height: 153rpx;
background-color: #7591AD;
border-radius: 50%;
position: relative;
z-index: 9;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(225deg, #8D93F7, #D4D6FC);
border-radius: 50%;
box-shadow: inset 0 0 50px #8D93F7;
overflow: hidden;
z-index: 0;
}
.wave::before, .wave::after {
position: absolute;
content: "";
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
.wave::before {
border-radius: 30%;
background: linear-gradient(225deg, #8D93F7, #D4D6FC);
animation: animate 5s linear infinite;
}
.wave::after {
border-radius: 40%;
background: #fff;
animation: animate 5s linear infinite;
}
@keyframes animate{
0%{
top:-50rpx;
transform: translate(-50%, -50%) rotate(0deg);
}
100%{
top:-50rpx;
transform: translate(-50%, -50%) rotate(360deg);
}
}