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

您可以将font-size与scale一起使用，而不是转换 transition：

将这些transition规则添加到span：

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

悬停时使用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>

使文本转换更顺畅

1 个答案: