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

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 ease out 而 $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