动画结束后小球消失,载入将要嵌入的html
时间: 2024-01-05 14:32:31 浏览: 30
要在动画结束后使小球消失并载入要嵌入的 HTML 文件,您可以使用 JavaScript 来实现。请修改之前的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid yellow;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 5s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 添加隐藏类 */
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="loader" class="loader"></div>
<!-- 添加一个隐藏的 iframe -->
<iframe id="content" src="your_file.html" frameborder="0" style="width: 100%; height: 100%; border: yellow;" class="hidden"></iframe>
<script>
// 获取小球和内容 iframe 的引用
const loader = document.getElementById("loader");
const content = document.getElementById("content");
// 监听小球动画结束事件
loader.addEventListener("animationend", function() {
// 隐藏小球
loader.classList.add("hidden");
// 显示内容 iframe
content.classList.remove("hidden");
});
</script>
</body>
</html>
```
在上述代码中,我们添加了一个隐藏的类 `.hidden`,并使用 JavaScript 在动画结束后将其添加到小球上,以及将其从内容 iframe 上移除。这样,在动画结束后,小球将消失,同时内容 iframe 将显示出来。请记得将 `your_file.html` 替换为要嵌入的本地 HTML 文件的路径。