首页圆环水平居中，纵向居中；转动2秒结束后在圆环正下方的嵌入窗口显示，并载入本地html

圆环水平居中，纵向居中；转动2秒结束后在圆环正下方的嵌入窗口显示，并载入本地html

时间: 2024-04-18 11:28:46 浏览: 102

要将圆环水平居中、纵向居中，并在转动2秒后在圆环正下方的嵌入窗口显示并载入本地 HTML 文件，您可以使用以下代码： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .loader { border: 16px solid #f3f3f3; border-top: 16px solid yellow; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear forwards; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .content { width: 100%; height: auto; border: none; } </style> </head> <body> <div class="container"> <div class="loader"></div> <iframe class="content" src="" frameborder="0"></iframe> </div> <script> setTimeout(function() { const loader = document.querySelector(".loader"); const content = document.querySelector(".content"); loader.style.display = "none"; content.src = "your_file.html"; }, 2000); </script> </body> </html> ``` 在上述代码中，我们使用了一个容器元素 `.container` 来使圆环水平居中、纵向居中。容器元素设置了 `display: flex;` 和一些 flex 盒子属性，以实现居中对齐。圆环和嵌入窗口的样式与之前类似，只是动画时间设为了2秒。通过 JavaScript 的 `setTimeout` 函数，我们在页面加载后等待2秒，然后隐藏圆环，并将嵌入窗口的 `src` 属性设置为您要嵌入的本地 HTML 文件的路径。请将上述代码保存为一个新的 HTML 文件，并将 `your_file.html` 替换为要嵌入的本地 HTML 文件的路径。然后，您可以将这个新的 HTML 文件嵌入到其他网页中，以实现所需的效果。

阅读全文