我写了一段代码来用CSS制作加载器。我尝试将内部 div 旋转 360 度，但它在主 div 之外旋转。已使用位置

Question

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    font-size: 50px;
  }
  body,
  html {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: black;
  }
  .maindiv {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: pink;
    position: relative;
  }
  .internalcircle {
    width: 3.5rem;
    height: 3.5rem;
    background-color: black;
    border-radius: 50%;
    animation: introtate 2s linear infinite alternate;
    position: absolute;
    transform-origin: center;
    transform: translate(-50% -50%);
  }
  @keyframes introtate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>

我希望内圆div旋转360度以产生加载效果，但内圆超出了主div，即使我使用了位置：相对于主div。我该怎么办

我想制作一个 CSS 加载器。我试图让内部 div 旋转 360 度，从而产生加载效果。我尝试尝试使用变换原点，但它仍然从主分区中旋转出来

Answer 1

尝试在.innercircle中使用position:relative并在检查器中调整它