小程序 计时旋转动效

wxml

 <view class="status-container {{charginDetail.isFull ? 'full' : 'charging'}}">
   <div class="score-bg-wrap">
        <view class="score-annulus" />
        <view class="score-annulus" />
        <view class="score-annulus" />
        <view class="score-annulus" />
    </div>
    <view class="charging-body">
        <text class="top">{{charginDetail.isFull ? '已充满' : '充电中'}}</text>
        <text class="middle">{{nowTime}}</text>
        <text class="bottom">{{startChargingTime}}</text>
        <text class="bottom" wx:if="{{charginDetail.isFull}}">{{endChargingTime}}</text>
     </view>
  </view>

wxss

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slide_horiz_pos {
    0% {
        transform: translateX(3%);
    }
    100% {
        transform: translateX(5%);
    }
}

@keyframes slide_horiz_neg {
    0% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(-3%);
    }
}

@keyframes slide_vert_neg {
    0% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(-3%);
    }
}

@keyframes slide_vert_pos {
    0% {
        transform: translateY(3%);
    }
    100% {
        transform: translateY(5%);
    }
}


.score-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: spin 5s linear infinite;
    border-radius: 50%;
    z-index: 1;
  
}

.score-annulus {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: lighten;
    opacity: .5;
    z-index: 1;
}

.score-annulus:nth-child(1) {
    animation: slide_horiz_neg 4s linear alternate infinite;
}

.score-annulus:nth-child(1)::after {
    background: rgba(17, 212, 182, 1);
}

.score-annulus:nth-child(2) {
    animation: slide_vert_neg 3s linear alternate infinite;
}

.score-annulus:nth-child(2)::after {
    background: rgba(17, 212, 182, .8);
}

.score-annulus:nth-child(3) {
    animation: slide_horiz_pos 4.5s linear alternate infinite;
}

.score-annulus:nth-child(3)::after {
    background: rgba(17, 212, 182, .6);
}

.score-annulus:nth-child(4) {
    animation: slide_vert_pos 3.5s linear alternate infinite;
}

.score-annulus:nth-child(4)::after {
    background: rgba(17, 212, 182, .4);
}

.score-annulus::after {
    content: "";
    color: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.charging-body {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    width: 100%;
    z-index: 10;
    border-radius: 50%;
    height: 100%;
}
.status-container {
    position: relative;
    width: 423rpx;
    height: 423rpx;
    display: flex;
    flex-direction: column;
    border-radius: 50%;
    color: #00c7a9;
    align-items: center;
    box-shadow: 0px 16rpx 34rpx 0rpx rgba(0, 212, 202, 0.15);
}
.status-container .top {
    font-size: 38rpx;
    margin-top: 60rpx;
    z-index: 10;
}

.status-container .middle {
    font-size: 90rpx;
    margin-top: 40rpx;
    font-family: 'Bebas Kai';
    z-index: 10;
}

.status-container .bottom {
    font-size: 28rpx;
    margin-top: 80rpx;
    color: #BDC4C4;
    z-index: 10;
}