如何用 CSS 创建居中旋转的加载动画（Loader）-html教程-PHP中文网

如何用 CSS 创建居中旋转的加载动画（Loader）

本文详解如何通过 css 实现一个精准居中、不溢出父容器的 360° 旋转加载动画，重点解决因 transform 使用不当导致子元素脱离父容器的问题，并推荐现代、简洁、可维护的实现方案。

本文详解如何通过 css 实现一个精准居中、不溢出父容器的 360° 旋转加载动画，重点解决因 transform 使用不当导致子元素脱离父容器的问题，并推荐现代、简洁、可维护的实现方案。

在构建 CSS 加载器（Loader）时，一个常见误区是过度依赖 position: absolute 与复合 transform（如 translate(-50%, -50%) + rotate()），这极易引发定位偏移、元素越界等问题。正如示例中所示：.internalcircle 设置了 position: absolute 和错误的 transform: translate(-50% -50%)（缺少逗号且语义混乱），导致其旋转中心偏离预期，视觉上“飞出”粉色主圆。

✅ 正确解法的核心在于：利用现代布局能力简化定位逻辑，分离动画属性，让旋转真正围绕自身中心进行。

✅ 推荐方案：Grid 居中 + rotate 独立动画属性

将 .maindiv 设为 display: grid; place-items: center，天然实现子元素（.internalcircle）水平垂直居中，无需 position: absolute 或手动 translate。同时，CSS Animation 中直接使用 rotate（而非包裹在 transform 中），语义清晰、行为可控：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.maindiv {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: pink;
  display: grid;
  place-items: center; /* ✅ 替代 position: relative + absolute 定位 */
}

.internalcircle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: conic-gradient(black 1deg, white 1deg, white 5deg, black 2deg); /* 可选：增强 loader 视觉节奏 */
  animation: introtate 2s linear infinite;
}

@keyframes introtate {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

? 关键改进点：

移除冗余 position: relative/absolute，避免层叠上下文与偏移计算干扰；

place-items: center 确保子元素始终严格居中，不受 font-size 或缩放影响；

使用独立的 rotate 动画属性（CSS Level 4），替代 transform: rotate(...)，避免与其他 transform 值（如 scale、translate）耦合；

animation: ... infinite（非 alternate）保证顺时针连续旋转，符合标准 loader 行为。