/* 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; }