关键帧动画中左上角的CSS 3 float 文本

Question

我尝试了很多不同的方法来向这个关键帧动画添加文本，但问题是当我包含包含文本的 div 时，它会弄乱其中一个动画。理想情况下，我希望文本位于中心和顶部或中心和左上角，但是当我到达那里时，它会抛出动画中的最后一个跨度。如何编辑类 waitingtext 使其不干扰动画？

Site where I got the css

HTML

 <div class="main-loading" ng-show="mainloading">
          <div class="waitingtext">My text</div> 
       <span class="main-loading"></span><!--
           --><span></span><!--
           --><span></span><!--
           --><span></span><!--
           --><span></span>
        </div>

CSS

    .waitingtext {

  color:#FFF;
  position: absolute;
  z-index: -1;
  line-height: 60px!important;
  float: left;
  margin-top: 5px;


}
div.main-loading
{
    background: #1b7817;
    opacity:.9;
    position: absolute;
    width: 400px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -200px;
    text-align: center;
    border:1px solid #dcdcdc;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; padding-left: 5px
}

div.main-loading
{
    position: absolute;
    height: 300px;
    top: 50%;
    left: 50%;
    line-height: 300px;
    text-align: center;
    clear: both;
}

.main-loading span
{
    display: inline-block;

    width: 10px;
    height: 10px;
    margin: 145px 3px 0;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);

    animation: wave 2s infinite ease-in-out;
    -moz-animation: wave 2s infinite ease-in-out;
    -webkit-animation: wave 2s infinite ease-in-out;
}

@keyframes wave
{
    0%, 60%, 100%
    {
        background: rgba(255,255,255,0.25);
        transform: translateY(0);
        -moz-transform: translateY(0);

    }

    20%
    {
        background: rgba(255,255,255,0.75);
        transform: translateY(13px);
        -moz-transform: translateY(13px);
    }

    40%
    {
        background: rgba(255,255,255,0.75);
        transform: translateY(-13px);
        -moz-transform: translateY(-13px);
    }

}

@-webkit-keyframes wave
{
    0%, 60%, 100%
    {
        background: rgba(255,255,255,0.25);
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }

    20%
    {
        background: rgba(255,255,255,0.75);
        transform: translateY(13px);
        -webkit-transform: translateY(13px);
    }

    40%
    {
        background: rgba(255,255,255,0.75);
        transform: translateY(-13px);
        -webkit-transform: translateY(-13px);
    }
}

.main-loading span:nth-child(1)
{
    animation-delay: 0s;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;

}

.main-loading span:nth-child(2)
{
    animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}

.main-loading span:nth-child(3)
{
    animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

.main-loading span:nth-child(4)
{
    animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

.main-loading span:nth-child(5)
{
    animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

Answer 1

这与定位无关，但与您的 CSS 选择器有关

:nth-child()(您使用的)计算父级的所有 子级，包括您添加的 div。你需要的是 nth-of-type()，它只计算跨度

Demo