继承父旋转动画

我已经用动画添加了一个“加载”微调至一个网页，如下防止HTML元素：继承父旋转动画

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

这是伟大的。但是现在我想让文本“加载”固定在微调中心的位置。我试图通过使用相对定位来做到这一点：

.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标签？

来源

2017-05-03 Matt Thrower

也可以尝试把它另一个容器内，并扭转了旋在容器上

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

来源

2017-05-03 11:18:16

感谢这个。如果你看看原来的问题，你会发现我尝试了反过来使用动画，但没有一个额外的“持有人”元素，你用它来使它工作。你能解释为什么这是必要的吗？ –

它可以在没有'holder'的情况下工作，但是你必须将'loader'的'transform origin'移动到'spinner'的'transform origin'，可能有点棘手，中间持有人的子父母，旋转轴（转换起源）与旋转器完全相同，它很容易否定“动作”。最后，这完全是关于变形的原点。但是对于子父节点，您不必担心再次定位“加载程序” –

试试这个，

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

来源

2017-05-03 11:04:50 Matt

继承父旋转动画

回答

相关问题