我试图使每个字母在悬停时都变大。我得到了那个动画,但是我想摆脱整个句子的移动。我尝试使用绝对定位;它没有用。
这是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;}
}
无需为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);}
}
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句