我正在尝试将我制作的动画与某些文本的感叹号中的点对齐。目前是我们加载界面的单独动画,代码如下:
.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
(徽章上写着)
想法?
最佳答案
您的容器和动画都需要居中,文本可以相对于其容器保持居中对齐。然后你改变动画中左边和顶部的位置:
#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
关于css - 有没有办法轻松地将动画与文本中的特定字母对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21582922/