Question

在悬停时，文字会变得模糊（在Chrome上）。我知道这是因为缩放文字 ..
所以我的问题是，有没有办法完成同样的任务，文本没有模糊这是我试过的

＆＃13;

span a {
  font-size: 24px;
}
span:hover a {
  color: #ba4a49;
  -webkit-transform: scale(10);
  transition: all 2s linear;
}

＆＃13;

<span>
    <a href="#">Hello this looks blured during transition</a>
</span>

＆＃13;

＆＃13;
的更新
请注意，我必须从中心缩放文本。如果我将字体大小改为10倍，则从左侧（非中心）

进行缩放

span:hover a {
  color: #ba4a49;
  font-size:250px;
  transition: all 2s linear;
}

Answer 1

为防止模糊，您可以在font-size而非transform: scale上进行转换。对于它的价值，我没有在我自己的Chrome浏览器上遇到任何模糊问题。

现场演示：

＆＃13;

span a{
    font-size: 24px;
}
span:hover a{
    color:#ba4a49 ;
    font-size: 240px;
    transition: all 2s linear;
}

＆＃13;

<span><a href="#">Hello this looks blured during transition</a></span>

＆＃13;