圆环水平居中,纵向居中;转动2秒结束后在圆环正下方的嵌入窗口显示,并载入本地html
时间: 2024-04-18 10:28:46 浏览: 95
要将圆环水平居中、纵向居中,并在转动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 文件嵌入到其他网页中,以实现所需的效果。
阅读全文