如何动画每个字母,而不改变文字大小 [英] How to animate every single letter without the text size changing
本文介绍了如何动画每个字母,而不改变文字大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想让每一个字母在悬停时变大。我得到了那个动画,但我想摆脱整个句子移动。我试过使用绝对定位;它不工作。
I am trying to make every single letter get bigger on hover. I got that animation but I want to get rid of the whole sentence to move. I tried using absolute positioning; it didn't work.
这里是 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()
Instead of animating the font-size
property you could animate 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>
这篇关于如何动画每个字母,而不改变文字大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文