Question

我正在尝试创建一个加载动画，其中外环向右旋转，而内环向左旋转。

这是所有CSS代码：

  html {
   height: 100%;
  }

  .loadingCircle {
    width: 100px;
    height: 100px;
    border: solid 5px transparent;
    border-top: solid 5px blue;
    border-radius: 50%;

    transform-origin: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.loadingCircleOuter {
  @extend .loadingCircle;

  animation: circleSpinOuter 2s linear infinite;
}

.loadingCircleInner {
  @extend .loadingCircle;

  height: 80px;
  width: 80px;

  animation: circleSpinInner 2s linear infinite;
}

@keyframes circleSpinOuter {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes circleSpinInner {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

这样做会导致内圆完全不旋转。如果我注释掉外圈的动画，则内圈的旋转正确，并使内圈的旋转速度快两倍，足以抵消外圈动画的旋转，并向其左侧添加适当的旋转（足够了，只是在它上面而不是在外面，那仍然是正确地向右旋转）。

很明显，外部动画同时应用于两个圆，但是为什么呢？

我不明白为什么会这样，更改外圆的颜色不会将更改应用到两个圆上，为什么会同时更改两个圆的动画？

我做错了什么吗？

@extend类动画相互抵消

0 个答案: