<div class="loading-mask"><div class="loading-text"><span style="--i:1">加</span><span style="--i:2">载</span><span style="--i:3">中</span><span style="--i:4">.</span><span style="--i:5">.</span><span style="--i:6">.</span></div>
</div>

.loading-mask {min-height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #000;.loading-text {font-size: 32px;color: #fff;span {display: inline-block;animation: jump 1.5s ease-in-out infinite;/* 利用变量设置延迟时间*/animation-delay: calc(.1s*var(--i)); }}
}
@keyframes jump {0% {transform: translateY(0px);}20% {transform: translateY(-24px);}40%,100% {transform: translateY(0px);}
}