H5页面全局添加加载动效

作者：System 时间：2024年08月21日分类：所有,css3 字数：1317

在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 函数确保在页面加载完成后移除加载动效，从而向用户隐藏加载动画。

H5页面全局添加加载动效

评论已关闭

推荐阅读