三圆对象不旋转 360 度答案

【问题标题】：Three Circle Object is not rotate 360degree三圆对象不旋转 360 度
【发布时间】：2021-08-25 19:20:58
【问题描述】：

请看下面的代码。

.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;
}

.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: -5px;
}

.obj-circle:nth-child(1) {
  background-color: #3766f3;
  animation-delay: 1.5s;
}

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

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

@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>

谁能帮我解决这个问题？物体圆的旋转不是真的是360度。谁能帮助我如何进行轮换 360度？但是当我尝试使用两个圆圈时，如果在 360 度上工作，则旋转。

【问题讨论】：

标签： html css css-animations

【解决方案1】：

这个怎么样？

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

.nk-loader-circle {
position:absolute;
  transform-origin: bottom center;
  animation: obj-rotate 3s linear infinite;
  height: 36px;
}

.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: -5px;
}

.nk-loader-circle:nth-child(1){
  animation-delay: -0.5s;
}

.nk-loader-circle:nth-child(1) .obj-circle{
  background-color: #3766f3;
  animation-delay: 1.5s;
}

.nk-loader-circle:nth-child(2){
  animation-delay: -.25s;
}

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

.nk-loader-circle:nth-child(3) {
  animation-delay: 0s;
}

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

@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>
  <div class="nk-loader-circle">
    <div class="obj-circle"></div>
  </div>
  <div class="nk-loader-circle">
    <div class="obj-circle"></div>
  </div>
</div>
</div>

【讨论】：