有没有办法轻松地将动画与文本中的特定字母对齐？

Question

我正在尝试将我制作的动画与某些文本的感叹号中的点对齐。目前是我们加载画面的单独动画，代码如下：

.loading-icon {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 0; height: 0; margin: auto;
  @include border-radius(100%);
  @include box-shadow(inset 0 0 0 $size/2 $c);
  -webkit-animation: load $ease infinite;
}
@-webkit-keyframes load {
  100% { width: $size; height: $size; box-shadow: none; }
}

$size 是 60px $ease 是 1s 缓出和 $c 只是我正在使用的颜色。这是一个说明动画的代码笔：http://cdpn.io/CczlK

所以，假设我有一个像 aaa!aaa 这样的词，并希望将动画与页面中心对齐。我一直在尝试一种以 hacky 的方式完成它的方法，但我真的希望它不仅仅适用于我的浏览器窗口。目前要调用我拥有的动画：

h1 
  aaa!aaa  
  .loading-icon

（写在徽章上）

想法？

Answer 1

您的容器和动画都需要居中，文本可以相对于其容器保持居中对齐。然后你改变动画中的左上角位置：

#loader
  %h1
    %span.label aaa!aaa
    %span.spinner

然后在你的CSS中

#loader {
  position: absolute;
  top   : 50%;
  left  : 50%;
  margin: -30px 0 0 -30px;
  width : 60px;
  height: 60px;
  text-align : center;

 h1 {
   position : relative;
 }

}

.spinner {
  width   : 0;
  height  : 0;
  top     : 0px;
  left    : 30px;
  margin  : auto;
  display : block;
  position: absolute;
  @include border-radius(100%);
  @include box-shadow(inset 0 0 0 $size/2 $c);
  animation: load $ease infinite;
}

@keyframes load {
 100% { width: $size; height: $size; left:0px; top:-30px; box-shadow: none; }
}

在 codepen 中编辑：http://codepen.io/anon/pen/nIioD