CSS三圆加载动画无法实现360度完整旋转问题求助

问题原因 #

• 核心问题出在.nk-loader-circle容器的宽度是动态变化的：该容器没有设置固定宽度，宽度由内部三个小圆的实际渲染宽度决定，小圆在scale(0)和scale(1)切换时，容器宽度会在0到最大宽度之间波动。你设置的旋转基点transform-origin: bottom center中的水平中点会跟随容器宽度变化发生偏移，导致旋转无法绕固定点完成完整360度转动。
• 额外影响因素：inline-block元素默认会携带HTML换行产生的空白间距，你设置的margin: -5px无法精准消除该间距，进一步加剧了容器宽度的波动。双圆场景下宽度波动幅度小，所以看起来旋转正常。

修复方案 #

调整.nk-loader-circle的样式，固定容器宽度，同时改用flex布局消除inline-block的空白问题，确保旋转基点位置固定：

修改后的完整代码 #

.nk-loader-c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nk-loader-circle {
  transform-origin: bottom center;
  animation: obj-rotate 3s linear infinite;
  height: 36px;
  /* 新增固定布局样式 */
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.obj-circle {
  display: inline-block;
  background-color: #6540eb;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  transform: scale(0);
  animation: obj-grow 1.5s linear infinite;
  margin: 0 2px; /* 替换原负margin，可按需调整小圆间距 */
}

.obj-circle:nth-child(1) {
  background-color: #3766f3;
  animation-delay: 1s; /* 可选优化：三个圆均分动画周期，节奏更均匀 */
}

.obj-circle:nth-child(2) {
  background-color: #603aef;
  animation-delay: .5s;
}

.obj-circle:nth-child(3) {
  background-color: #2998f6;
  animation-delay: 0s;
}

@keyframes obj-rotate {
  to{
    transform: rotate(360deg);
  }
}


@keyframes obj-grow {
  50% {
    transform: scale(1);
  }
}

<div class="nk-loader-c">
  <div class="nk-loader-circle">
    <div class="obj-circle"></div>
    <div class="obj-circle"></div>
    <div class="obj-circle"></div>
  </div> 
</div>

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