网页开启的过载动画效果
时间: 2023-10-19 18:30:04 浏览: 30
好的,以下是一个使用HTML、CSS和JavaScript创建网页过载动画的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页过载动画</title>
<style>
body {
background-color: black;
overflow: hidden;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
border: 8px solid #ffffff;
border-top-color: #ff0000;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
<script>
// 页面加载完成后隐藏动画
window.addEventListener("load", function() {
document.querySelector(".loader").style.display = "none";
});
</script>
</body>
</html>
```
这个示例代码使用HTML、CSS和JavaScript创建了一个简单的网页过载动画。动画通过CSS定义,它是一个宽高为80像素的圆形,具有8像素宽的白色边框和红色的顶部边框。动画通过使用animation属性和spin关键帧动画来旋转。在JavaScript中,我们监听了页面加载事件,当页面加载完成后,我们隐藏了动画。您可以根据需要调整动画的大小、颜色和动画参数来创建您想要的网页过载动画效果。