wechat-pilelog/pages/batteryPack/batteryPackWait.wxss

/* pages/batteryPack/batteryPackWait.wxss */
page{
    display: flex;
    flex-direction: column;
}
.car{
    margin-top:5%;
    width:100%;
    padding: 0;
}
.txt{
    /* color: rgba(33, 173, 255, 1); */
    font-size: 40rpx;
    text-align: center;
}
.loading{
    margin-top:10%;
    height:40rpx;
    display: flex;
    justify-content: space-between;
    width: 30%;
    margin-left: 35%;
}


.loading .loader-circle {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #93dffb; /*淡蓝*/
    animation-duration: 2s;
    animation-name: loadingCircle;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    opacity: 0;
}

@keyframes loadingCircle {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    16.67% { /* 每个元素动画开始的时间点 */
        opacity: 0.5;
    }
    33.33% {
        transform: scale(1.3);
        background-color: #27bef7; /*深蓝*/
    }
    50% {
        transform: scale(1.6);
        opacity: 0.9;
    }
}

/* 确保每个圆按照顺序开始动画 */
.loading .loader-circle:nth-child(1) {
    animation-delay: 0s;
}
.loading .loader-circle:nth-child(2) {
    animation-delay: 0.2s;
}
.loading .loader-circle:nth-child(3) {
    animation-delay: 0.4s;
}
.loading .loader-circle:nth-child(4) {
    animation-delay: 0.6s;
}
.loading .loader-circle:nth-child(5) {
    animation-delay: 0.8s;
}