Question

我已使用动画向网页添加了“加载”微调器，如下所示：

<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类中以尝试解决此问题：

animation: none !important;

animation: spin 2s linear infinite reverse;

都没有效果。

这可以解决吗？或者我是否最好尝试在文本上使用固定定位而不是嵌套div标签？

Answer 1

试试这个，

＆＃13;

START 

D/OkHttp: Specific Gravity Before Charging : 150,150,150,150,150,150

D/OkHttp: Specific Gravity After Charging : 150,150,150,150,150,150

D/OkHttp: Battery Serial : 2bea79b1001000

 D/OkHttp: Battery AH : 150

 D/OkHttp: Battery Type : INVERTER

 D/OkHttp: OCV , 16.0

 D/OkHttp: OCV , 14.5

 D/OkHttp: OCV , 14.5

 D/OkHttp: OCV , 14.5

 D/OkHttp: OCV , 14.5

 D/OkHttp: Inverter DCHG After 02 Hr :

 D/OkHttp: FAN THERMAL SHUTDOWN FAULT

 D/OkHttp: 4,1,0000

 D/OkHttp: 4,2,0000

 D/OkHttp: END

＆＃13;

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

＆＃13;

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元素继承父旋转动画

2 个答案: