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这样的词，并希望在页面的中心将动画与它对齐。我一直在尝试以一种黑客的方式完成它，但我真的希望它不仅仅是我的浏览器窗口。目前我要调用动画：

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

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

1 个答案: