圆环居中,另外圆环转动5秒消失,再载入嵌入的html到圆环下方的嵌入框
时间: 2024-04-18 09:28:50 浏览: 11
要实现圆环居中、5秒后消失并载入嵌入的 HTML 到圆环下方的嵌入框,您可以使用以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.loader-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid yellow;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 5s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.content {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
<iframe class="content" src="" frameborder="0"></iframe>
</div>
<script>
setTimeout(function() {
const loaderContainer = document.querySelector(".loader-container");
const loader = document.querySelector(".loader");
const content = document.querySelector(".content");
loaderContainer.removeChild(loader);
content.src = "your_file.html";
}, 5000);
</script>
</body>
</html>
```
在上述代码中,我们创建了一个容器元素 `.loader-container` 来居中显示圆环和嵌入框。圆环使用了之前的样式,并添加了一个 `margin-bottom` 来与嵌入框保持一定的间距。嵌入框使用了类名 `.content`,并设置了宽度、高度为100%以填充容器,并去掉了边框。
通过 JavaScript 的 `setTimeout` 函数,我们在页面加载后等待5秒钟,然后移除圆环,并将嵌入框的 `src` 属性设置为您要嵌入的 HTML 文件的路径。
请将上述代码保存为一个新的 HTML 文件,并将 `your_file.html` 替换为要嵌入的本地 HTML 文件的路径。然后,您可以将这个新的 HTML 文件嵌入到其他网页中,以实现所需的效果。