如何使用纯CSS为加载屏背景图添加旋转动画，以及优化现有Loader模态框实现背景图旋转与居中文字添加

我来帮你一步步搞定这几个需求，直接上代码和易懂的解释：

1. 纯CSS实现Logo旋转动画 #

核心是用CSS的@keyframes定义旋转动画，然后把Logo放到模态框的伪元素上（这样不会影响后续添加的文字）：

首先定义旋转动画：

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

然后修改原来的.modal样式，把背景图移到::before伪元素中，并应用动画：

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8);
  /* 用flex布局方便后续居中文字 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 用伪元素承载Logo并添加旋转动画 */
.modal::before {
  content: '';
  width: 60px; /* 根据你的Logo大小调整 */
  height: 60px;
  margin-bottom: 15px; /* 和下方文字保持间距 */
  background: url('logotip1.png') center center no-repeat;
  background-size: contain; /* 自适应伪元素尺寸 */
  animation: spin 1.5s linear infinite; /* 1.5秒一圈，匀速循环 */
}

2. 在模态框正中间添加文字 #

直接在.modal标签内加入文本元素，利用刚才设置的flex布局自动居中：

<div class="modal">
  <span class="loading-text">加载中，请稍候...</span>
</div>

再给文字加一点样式优化：

.loading-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

3. 完整整合代码 #

把所有部分放在一起，加上原来的body.loading触发逻辑：

/* 旋转动画定义 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal::before {
  content: '';
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  background: url('logotip1.png') center center no-repeat;
  background-size: contain;
  animation: spin 1.5s linear infinite;
}

.loading-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

/* 原有触发逻辑不变 */
body.loading {
  overflow: hidden;
}

body.loading .modal {
  display: flex; /* 这里改成flex，保持居中 */
}

<!-- 放在页面底部 -->
<div class="modal">
  <span class="loading-text">加载中，请稍候...</span>
</div>

补充：纯CSS给加载屏背景图加旋转动画的思路 #

其实刚才的实现就是标准方案：

• 用@keyframes定义从0到360度的旋转动作
• 将背景图放在独立的容器（这里用了伪元素，也可以用单独的div）上，避免整个模态框跟着旋转
• 通过animation属性把动画应用到这个容器上，设置循环次数、速度曲线等参数

这样既不用制作GIF，还能灵活控制旋转速度、方向，甚至可以添加暂停/播放的交互~

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