我想顯示 Ring.html 幾秒鐘，直到 About.html 完全加載。當(dāng) About.html 完全加載時(shí)，Ring.html 應(yīng)該會(huì)消失。由于我是網(wǎng)絡(luò)開發(fā)的新手，非常感謝您的幫助。如果要使用 jQuery，那么請告訴我如何以及在何處添加小步驟中的代碼。我曾嘗試查看其他人的答案，但無法理解如何將它們應(yīng)用于我的代碼。這是我的微調(diào)器的 Ring.html 頁面 <!doctype html><html> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <link href="Ring.css" rel="stylesheet"> </head> <body> <div class="ring"> Loading <span></span> </div> </body></html>這是我的微調(diào)器的 Ring.css 代碼body{ margin:0; padding:0; background:#262626;}.ring{ position:absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width:150px; height:150px; background:transparent; border-radius:50%; text-align:center; line-height:150px; font-family: 'Pacifico', cursive;; font-size:20px; color:#9e1ac9; letter-spacing:4px; text-shadow:0 0 10px #9e1ac9; box-shadow:0 0 20px rgba(0,0,0,.5);}.ring{ border:3px solid #3c3c3c;}.ring:before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 50%; animation: animateCircle 2s linear infinite;}.ring:before{ border: 3px solid transparent; border-top: 3px solid #9e1ac9; border-right: 3px solid #9e1ac9;}span{ display:block; position: absolute; top: calc(50% - 2px); Left: 50%; width: 50%; height: 4px; background: transparent; transform-origin: left; animation: animate 2s linear infinite;}span:before{ content:''; position:absolute; width: 16px; height: 16px; border-radius: 50%; background: #9e1ac9; top: -6px; right: -8px; box-shadow: 0 0 20px #9e1ac9;}@keyframes animateCircle{ 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); }}@keyframes animate{ 0% { transform:rotate(45deg); } 100% { transform:rotate(405deg); }}
顯示微調(diào)器，直到頁面完全加載
侃侃爾雅
2022-10-08 18:05:14
