如何为CSS加载器添加页面模糊效果且排除加载器自身

你遇到的核心问题是：加载器作为body的子元素，当给body添加filter: blur()时，所有子元素都会继承这个模糊效果，同时原CSS中visibility: none是语法错误，应该是visibility: hidden，这也导致了加载器显示异常。

解决方案 #

核心思路是让加载器脱离页面内容的层级，采用固定定位悬浮在页面最上层，同时只给页面内容（而非整个body）添加模糊效果。

方法1：使用内容包裹层（推荐，结构更清晰）

修改后的完整代码如下：

HTML

<div class="page-content">
  <form id="postForm">
    <button id="submitbutton" type="submit">Create</button>
  </form>
  <!-- 其他页面内容都放在这个包裹层里 -->
</div>
<!-- 全局加载器，独立于内容层之外 -->
<div class="loading"></div>

CSS

/* 激活状态下给内容层添加模糊 */
body.loading .page-content {
  filter: blur(5px);
  pointer-events: none;
  transition: filter 0.3s ease; /* 平滑过渡模糊效果 */
}

/* 加载器样式：固定在页面中央，默认隐藏 */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  z-index: 9999; /* 确保加载器在所有内容之上 */
}

/* 激活加载器 */
.loading.visible {
  visibility: visible;
}

.loading::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 10px solid #dddddd;
  border-top-color: #009579;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  to {
    transform: rotate(1turn);
  }
}

JavaScript

const myForm = document.getElementById("postForm");
const loader = document.querySelector(".loading");
const submitBtn = document.getElementById("submitbutton");

myForm.addEventListener("submit", function(event) {
  event.preventDefault();
  
  loader.classList.add("visible");
  document.body.classList.add("loading");
  submitBtn.disabled = true;

  setTimeout(() => {
    event.target.submit();
  }, 1000);
});

方法2：无需额外包裹层（用CSS选择器过滤）

如果不想添加.page-content包裹层，可以直接通过CSS选择器给body下除加载器外的所有子元素添加模糊：

修改CSS中的模糊规则：

body.loading > *:not(.loading) {
  filter: blur(5px);
  pointer-events: none;
  transition: filter 0.3s ease;
}

对应的HTML只需把加载器放在body下即可：

<form id="postForm">
  <button id="submitbutton" type="submit">Create</button>
</form>
<div class="loading"></div>

关键说明 #

• 加载器使用position: fixed固定在视口，z-index: 9999确保它悬浮在所有内容之上，不受内容模糊影响。
• 仅对页面内容应用模糊，避免加载器被一并模糊。
• 修复了原CSS中visibility: none的语法错误，改为visibility: hidden。

内容的提问来源于stack exchange，提问作者Hendel Ekstein