我想制作一個加載屏幕和一個淡入淡出的頁面，如下所示：https : //www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5。問題是我不知道如何結束加載循環(huán)并使其褪色。代碼 <body> <div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> </body>body { background-color: #636e72; }sk-chase { width: 40px; height: 40px; animation: sk-chase 2.5s infinite linear both; display: flex; justify-content: center; align-items: center; margin: 0 auto; top: 50%; left: 50%; position: absolute; } .sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both; }.sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #fff; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; @keyframes sk-chase { 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1.0); } }
如何在 2 秒后停止加載動畫？
HUX布斯
2021-12-23 19:05:11
