防止 HTML 元素继承父旋转动画

Question

我已经使用动画向网页添加了一个 "loading" 微调器，如下所示：

<style>

.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -50px;
  z-index: 2;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>

<div class="spinner"></div>

太棒了。但我现在想将文本 "Loading" 固定在微调器的中心。我试图通过使用相对定位来做到这一点：

.loader {
  width: 120px;
  margin: 0 auto;
  position: relative;
  height: auto;
}

<div class="spinner">
    <div class="loader>LOADING</div>
</div>

但是这个继承了父动画。这是出错的 fiddle。

我已尝试将以下内容添加到 .loader class 以尝试解决此问题：

animation: none !important;

animation: spin 2s linear infinite reverse;

都不行。

这个可以修复吗？还是我最好也尝试在文本上使用固定定位而不是嵌套 div 标签？

Answer 1

试试这个，

    .loader {
      width: 120px;
      margin: 0 auto;
      position: relative;
      height: auto;
    }
    .holder {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-left: -70px;
      margin-top: -50px;
    }
    .spinner {
      width: 120px;
      height: 120px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

<div class="holder">
      <div class="spinner">
      </div>
      <div class="loader">
        LOADING ...
      </div>
    </div>

Answer 2

也可以尝试将其放入另一个容器中并反转容器上的旋转

.loader {
  width: 120px;
  margin: 0 auto;
  position: relative;
  height: auto;
}

.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -50px;
  z-index: 2;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  animation: spin 2s linear infinite;
}

.holder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: spin 2s linear infinite reverse;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="spinner">
  <div class="holder">
    <div class="loader">
      LOADING ...
    </div>
  </div>
</div>

防止 HTML 元素继承父旋转动画

Preventing an HTML element from inheriting parent spin animation

html

css

webkit