文字在转换期间变得模糊 [英] Text gets Blured during transition

问题描述

悬停时，文字变得模糊（在Chrome上）。
我知道这是因为 SCALING的文本。

所以我的问题是有什么办法做同样的任务，其中文本不会模糊。

这是我试过的

  span a {font-size：24px;} span： hover a {color：＃ba4a49; -webkit-transform：scale（10）; transition：all 2s linear;}  

 < span& < a href =＃>您在转换期间看起来模糊不清 




更新

Plese请注意，我必须从中心开始缩放文本。如果我改变字体大小10次然后缩放是从左侧（不是中心）

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

查看更新
Jsfiddle链接

解决方案

为了防止模糊，您可以在 font-size c $ c> transform：scale 。

现场演示：

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

 < span> ; a href =＃> Hello在转换期间看起来模糊不清< / a>< / span>  

On hovering Text gets blured(on Chrome). I know this is because of SCALING of text..
So my question is is there any way to do the same task in which text doesn't get blured.
Here is what I have tried

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

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

update
Plese Note that I have to scale the text from center. If I change the font Size 10 Times then scaling is done from left(not center)

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

See Updated Jsfiddle Link

解决方案

To prevent blurring, you can transition on font-size instead of on transform: scale. For what it's worth, I didn't experience any blurring problems with your example on my own Chrome browser.

Live Demo:

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

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

这篇关于文字在转换期间变得模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！