全屏加载页面动画特效
时间: 2024-02-05 16:06:24 浏览: 21
可以使用CSS3的动画特效来实现全屏加载页面动画,具体实现方式如下:
1. 在HTML文件中添加一个全屏的div元素,用于显示加载动画。
2. 使用CSS3的@keyframes规则定义动画效果。
3. 使用CSS3的animation属性将动画效果应用到全屏div元素上。
4. 使用JavaScript在页面加载完成后隐藏全屏div元素。
以下是一个简单的示例代码:
HTML代码:
```
<div id="loading">
<div class="spinner"></div>
</div>
```
CSS代码:
```
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
border-radius: 50%;
border: 3px solid #ccc;
border-top-color: #333;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
JavaScript代码:
```
window.addEventListener('load', function() {
var loading = document.getElementById('loading');
loading.style.display = 'none';
});
```