html+css+js给整个页面加上一个加载动画
时间: 2024-01-06 17:11:24 浏览: 136
您可以在页面中添加一个遮罩层,并在其中添加加载动画,来模拟整个页面加载的效果。下面是一个示例代码:
HTML:
```html
<div id="loading">
<div class="loader"></div>
</div>
<!-- 页面内容 -->
<div id="page-content">
<!-- 页面中的其他元素 -->
</div>
```
CSS:
```css
/* 遮罩层 */
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
z-index: 9999;
}
/* 加载动画 */
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 隐藏遮罩层 */
#page-content {
display: none;
}
.loaded #page-content {
display: block;
}
```
JavaScript:
```js
// 页面加载完成后隐藏加载动画
window.addEventListener('load', function() {
document.querySelector('#loading').classList.add('loaded');
});
```
这样,页面加载时就会显示一个遮罩层和一个加载动画,当页面加载完成后,加载动画会隐藏,显示页面内容。您可以根据需要调整加载动画的样式和遮罩层的透明度等属性。
阅读全文