jquery - 使文本过渡更平滑

Question

我有这个<span>我网站上的文字。我想在这里做的是使此文本在 font-size 中增加当它悬停在上时。我用了通常的 transition: 1s font-size ease ，但这只是一个非常艰难的过渡。我想让它顺利，这样它就不会在中间产生微小的间隔。

这是我的 HTML+CSS，修剪成所说的 element :

span {
  font-size: 12px;
  font-family: sans-serif;
  transition: 1s font-size ease;
 }
span:hover {
  font-size: 24px;
}

<span>Aravind's Site</span>

顺便说一句，除非绝对必要，否则请不要使用 jQuery。

Answer 1

您可以使用 scale 和 transition 代替transforming font-size:

1. 将这些 transition 规则添加到 span:

   transition: transform 1s ease;
   display: inline-block;
   transform-origin: left;
   

2. 悬停时使用transform: scale(1.5)

span {
  font-size: 12px;
  font-family: sans-serif;
  transition: transform 1s ease;
  display: inline-block;
  transform-origin: left;
 }
span:hover {
  transform: scale(1.5);
}

<span>Aravind's Site</span>