.container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: auto; } .loading { position: relative; width: 40px; border-radius: 20px; perspective: 500px; align-self: center; margin-top: 80rpx; } .loading:before, .loading:after { position: absolute; width: 15px; height: 15px; content: ""; border-radius: 20px; animation: jumping 0.5s infinite alternate; background: rgba(0, 0, 0, 0); } .loading:before { left: 0; } .loading:after { right: 0; animation-delay: 0.15s; } .error-box { align-self: center; display: flex; flex-direction: column; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 100vw; height: 40vh; } .loading_err { display: flex; flex-direction: row; justify-content: center; width: 150px; align-items: center; height: 100px; align-self: center; } @keyframes jumping { 0% { transform: scale(1) translateY(0px) rotateX(0deg); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 100% { transform: scale(1.2) translateY(-25px) rotateX(45deg); background: #FE9944; box-shadow: 0 25px 40px #FE9944; } }