H5页面 全局添加加载动效
warning:
这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。
在H5页面中，可以通过JavaScript和CSS来实现全局加载动效。以下是一个简单的示例，展示了如何为整个页面添加一个简单的加载动效：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局加载动效</title>
<style>
/* 加载动效样式 */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* 确保加载动效在其他内容之上 */
}
.loading-spinner {
border: 4px solid #f3f3f3; /* 轻颜色的边框 */
border-top: 4px 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="loading-overlay">
<div class="loading-spinner"></div>
</div>
<!-- 页面内容 -->
<script>
window.onload = function() {
// 页面加载完成后移除加载动效
document.querySelector('.loading-overlay').style.display = 'none';
};
</script>
</body>
</html>这段代码中，.loading-overlay 类用于创建一个覆盖整个页面的遮罩层，而 .loading-spinner 类则用于创建一个旋转的加载动效图标。CSS中的 @keyframes 规则定义了旋转动画，而JavaScript的 window.onload 函数确保在页面加载完成后移除加载动效，从而向用户隐藏加载动画。
评论已关闭