过渡期间文本变得模糊

Posted 2023-03-06

【中文标题】过渡期间文本变得模糊

【英文标题】：Text gets Blured during transition

【发布时间】：2015-11-11 21:14:58

【问题描述】：

在悬停时文本变得模糊（在 Chrome 上）。 我知道这是因为 文本缩放.. 所以我的问题是有没有什么方法可以做同样的任务，文本不会变得模糊。 这是我尝试过的

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>

更新

请注意，我必须从中心缩放文本。如果我将字体大小更改 10 次，则从左侧（不是中心）进行缩放

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

See Updated Jsfiddle Link

【问题讨论】：

当我的浏览器全屏时，文本不会模糊，仅供参考。

只需将span a font-size 设置为100%

你试过this吗？

是的，我的问题没有解决

【参考方案1】：

为防止模糊，您可以在font-size 上转换，而不是在transform: scale 上。无论如何，我在自己的 Chrome 浏览器上没有遇到任何模糊问题。

现场演示：

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>

【讨论】：

在我将浏览器窗口的大小调整得更小（Google Chrome、Windows 8.1、最新）之前，我也没有注意到任何模糊现象

我不认为你的方式可以替代缩放，需要更多的 css 技巧来模拟它

在我的屏幕上文本变得模糊..更改字体大小不会解决我的一个问题..我需要从中心缩放..需要定义缩放轴..如何做到这一点？

@HosseinShahsahebi 这完全取决于用例。对于某些用例，这将是一个合适的替代品，对于其他用例，它需要一些额外的 CSS。

@Vishu238 如果你不介意使用一点点 javascript，这里有一种方法可以让 font-size 从中心缩放：jsfiddle.net/be9o8tz9/5