html退出加载界面代码
时间: 2023-08-13 21:06:04 浏览: 46
以下是一个简单的 HTML/CSS/JavaScript 代码示例,可以实现一个带有退出加载界面的页面。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>退出加载界面示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading-screen">
<div class="loading-icon"></div>
</div>
<div id="main-content">
<!-- 主要内容区域 -->
<h1>这里是页面主要内容</h1>
<p>欢迎访问我的网站!</p>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.loading-icon {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #f44336;
animation: spin 1s infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#main-content {
display: none;
}
```
JavaScript 代码:
```js
window.addEventListener('load', function() {
var loadingScreen = document.getElementById('loading-screen');
var mainContent = document.getElementById('main-content');
loadingScreen.style.display = 'none';
mainContent.style.display = 'block';
});
```
在上述代码中,我们通过 CSS 实现了一个带有旋转动画的加载图标,并使用 JavaScript 在页面加载完成后隐藏加载界面,显示主要内容区域。您可以根据需要修改样式和动画效果。