如何为网页加载遮罩的背景图片添加旋转动画？

好问题！直接给.overlay加旋转动画会让整个半透明背景跟着旋转，这显然不是我们想要的效果——我们只需要让加载图标单独转动。这里有两种可行的解决方案，你可以根据自己的场景选择：

方法一：使用CSS伪元素（无需修改现有HTML） #

这种方法不需要调整页面结构，用伪元素单独承载加载图标，完美分离遮罩背景和旋转元素：

1. 先修改.overlay的CSS，移除背景图，只保留半透明遮罩：

.overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8);
}

2. 给.overlay添加伪元素来加载图标并应用旋转动画：

.overlay::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 根据你的图标尺寸调整宽高 */
  width: 50px;
  height: 50px;
  /* 让图标居中：值为宽高的一半，负方向偏移 */
  margin: -25px 0 0 -25px;
  background: url('../images/loaderIcon.png') no-repeat center center;
  background-size: contain; /* 确保图标自适应容器大小 */
  /* 应用旋转动画 */
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

3. 确保你已经定义了旋转动画的关键帧：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

这样，当你显示遮罩时，只有伪元素里的加载图标会旋转，半透明背景保持静止。

方法二：修改HTML结构，单独承载加载图标 #

如果更倾向于直观的DOM结构，可以单独用一个元素来放加载图标：

1. 更新HTML结构：

<div class="overlay">
  <div class="loader-icon"></div>
</div>

2. 调整对应的CSS：

.overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8);
}

.loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  background: url('../images/loaderIcon.png') no-repeat center center;
  background-size: contain;
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

3. 同样需要保留旋转动画的关键帧定义（和方法一一致）。

如何触发遮罩显示/隐藏 #

用JavaScript控制遮罩的显示状态即可：

// 显示加载遮罩
document.querySelector('.overlay').style.display = 'block';

// 隐藏加载遮罩
document.querySelector('.overlay').style.display = 'none';

推荐使用方法一，因为它不需要改动现有HTML，代码更简洁易维护~

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