我试图让每一个字母在悬停时变得更大。我得到了那个动画,但我想摆脱整个句子移动。我尝试过使用绝对定位;它没有用。
这是jsfiddle。
HTML:
<div>
<h1>
<span id='let-1'>S</span><span id='let-2'>a</span><span id='let-3'>m</span><span id='let-4'>p</span><span id='let-5'>l</span><span id='let-6'>e</span>
<span id='let-7'>T</span><span id='let-8'>e</span><span id='let-9'>x</span><span id='let-10'>t</span>
</h1>
</div>
CSS:
h1 {
text-align: center;
}
span {
font-size: 3em;
}
div:hover span {
animation: .3s letters forwards;
}
#let-2 {
animation-delay: .1s;
}
#let-3 {
animation-delay: .2s;
}
#let-4 {
animation-delay: .3s;
}
#let-5 {
animation-delay: .4s;
}
#let-6 {
animation-delay: .5s;
}
#let-7 {
animation-delay: .6s;
}
#let-8 {
animation-delay: .7s;
}
#let-9 {
animation-delay: .8s;
}
#let-10 {
animation-delay: .9s;
}
@-webkit-keyframes letters {
from,to {font-size: 3em;}
50% {font-size: 4em;}
}
@keyframes letters {
from,to {font-size: 3em;}
50% {font-size: 4em;}
}
答案 0 :(得分:6)
您可以动画font-size
transform: scale()
属性设置动画
h1 {
text-align: center;
}
span {
font-size: 3em;
display: inline-block;
}
div:hover span {
animation: .3s letters forwards;
}
#let-2 {
animation-delay: .1s;
}
#let-3 {
animation-delay: .2s;
}
#let-4 {
animation-delay: .3s;
}
#let-5 {
animation-delay: .4s;
}
#let-6 {
animation-delay: .5s;
}
#let-7 {
animation-delay: .6s;
}
#let-8 {
animation-delay: .7s;
}
#let-9 {
animation-delay: .8s;
}
#let-10 {
animation-delay: .9s;
}
@-webkit-keyframes letters {
from,to {transform: scale(1);}
50% {transform: scale(1.3);}
}
@keyframes letters {
from,to {transform: scale(1);}
50% {transform: scale(1.3);}
}
&#13;
<div>
<h1>
<span id='let-1'>S</span><span id='let-2'>a</span><span id='let-3'>m</span><span id='let-4'>p</span><span id='let-5'>l</span><span id='let-6'>e</span>
<span id='let-7'>T</span><span id='let-8'>e</span><span id='let-9'>x</span><span id='let-10'>t</span>
</h1>
</div>
&#13;
答案 1 :(得分:0)
只需在float: left
元素上添加span
即可。但是,您需要以h1
为中心,取宽度并制作margin: auto
。