网页加载动画的实现与控制：从CSS设计到JavaScript隐藏的完整指南

<div class="loading">
    <div class="loading-img">
        <span class="loading-img-img">
            <img src="images/logo.png" height="50px" width="50px" alt="Loading Logo">
        </span>
        <span class="loading-text-words">G</span>
        <span class="loading-text-words">R</span>
        <span class="loading-text-words">A</span>
        <span class="loading-text-words">V</span>
        <span class="loading-text-words">G</span>
        <span class="loading-text-words">I</span>
        <span class="loading-text-words">F</span>
        <span class="loading-text-words">T</span>
    </div>
</div>
<!-- 页面加载完成后显示的内容 -->
<div id="main-content" style="display: none;">
    <h1>内容已加载</h1>
    <p>这是页面加载完成后用户将看到的主要内容。</p>
</div>

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);

/* 全屏加载层 */
.loading {
  position: fixed; /* 固定定位，覆盖整个视口 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 白色背景 */
  z-index: 9999; /* 确保在所有内容之上 */
  display: flex; /* 使用Flexbox居中内容 */
  justify-content: center;
  align-items: center;
}

/* 加载动画内容的容器 */
.loading-img {
  text-align: center; /* 确保内部行内元素居中 */
}

/* Logo图片定位 */
.loading-img-img {
  position: relative;
  top: 15%; /* 相对位置调整 */
  display: block; /* 使其独占一行，与文字分离 */
  margin-bottom: 10px; /* 与下方文字的间距 */
}

/* 动画文字样式 */
.loading-img span {
  display: inline-block; /* 使每个字母独立，可应用动画 */
  margin: 0 5px;
  font-family: "Quattrocento Sans", sans-serif;
  font-size: 30px;
  color: #333; /* 文字颜色 */
}

/* 关键帧动画：模糊效果 */
@-webkit-keyframes blur-img {
  0% { filter: blur(0px); }
  100% { filter: blur(4px); }
}

@keyframes blur-img {
  0% { filter: blur(0px); }
  100% { filter: blur(4px); }
}

/* 为每个字母应用延迟的模糊动画 */
.loading-img span:nth-child(2) { /* 第一个文字，跳过图片 */
  -webkit-animation: blur-img 1.5s 0s infinite linear alternate;
  animation: blur-img 1.5s 0s infinite linear alternate;
}
.loading-img span:nth-child(3) {
  -webkit-animation: blur-img 1.5s 0.2s infinite linear alternate;
  animation: blur-img 1.5s 0.2s infinite linear alternate;
}
.loading-img span:nth-child(4) {
  -webkit-animation: blur-img 1.5s 0.4s infinite linear alternate;
  animation: blur-img 1.5s 0.4s infinite linear alternate;
}
.loading-img span:nth-child(5) {
  -webkit-animation: blur-img 1.5s 0.6s infinite linear alternate;
  animation: blur-img 1.5s 0.6s infinite linear alternate;
}
.loading-img span:nth-child(6) {
  -webkit-animation: blur-img 1.5s 0.8s infinite linear alternate;
  animation: blur-img 1.5s 0.8s infinite linear alternate;
}
.loading-img span:nth-child(7) {
  -webkit-animation: blur-img 1.5s 1s infinite linear alternate;
  animation: blur-img 1.5s 1s infinite linear alternate;
}
.loading-img span:nth-child(8) {
  -webkit-animation: blur-img 1.5s 1.2s infinite linear alternate;
  animation: blur-img 1.5s 1.2s infinite linear alternate;
}
.loading-img span:nth-child(9) {
  -webkit-animation: blur-img 1.5s 1.4s infinite linear alternate;
  animation: blur-img 1.5s 1.4s infinite linear alternate;
}
/* 注意：原始代码中nth-child(1)是图片，所以文字从nth-child(2)开始 */

window.onload = function() {
  // 获取加载动画元素和主要内容元素
  const loadingElement = document.querySelector(".loading");
  const mainContentElement = document.getElementById("main-content");

  // 设置一个延迟，即使页面加载很快，也确保动画展示一段时间
  // 这里的6000ms (6秒) 是一个示例，您可以根据动画时长和需求调整
  setTimeout(function() {
    if (loadingElement) {
      loadingElement.style.display = 'none'; // 隐藏加载动画
    }
    if (mainContentElement) {
      mainContentElement.style.display = 'block'; // 显示主要内容
    }
  }, 6000); // 6秒后隐藏加载动画
};