用html写一个加载页面动画
以下是一个简单的HTML页面加载动画示例。这个动画使用了一个简单的CSS动画和HTML元素来模拟加载过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面加载动画</title>
<style>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
transition: opacity 0.5s ease-out;
opacity: 1;
}
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
</div>
<script>
window.onload = function() {
setTimeout(function() {
document.querySelector('.loader-container').style.opacity = 0;
}, 3000); // 假设页面加载完成后3秒后隐藏加载动画
};
</script>
</body>
</html>这段代码创建了一个页面加载动画，并在3秒后自动隐藏。这个动画可以通过CSS调整大小和颜色，并可以添加到任何需要页面加载动画的HTML页面中。
评论已关闭