css - CSS Transform Scale 使文本模糊

Question

我有一个悬停效果，当它被触发时，框会放大。我唯一的问题是文本在过渡过程中似乎变得模糊，然后在“变形”时再次变得清晰。

在在这里发帖之前，我决定进行一项研究，并遇到了这篇文章，这似乎也是我的问题：

我已将他们的答案应用于我的构建，但仍然会出现模糊效果。我在下面提供了一个链接，如果有人能告诉我我有什么可以解决的，那就太好了！

例如转换代码：

-moz-transform:scale(1.05,1.05);

score 1 · Accepted Answer

虽然它不是等效的，但在 :hover 中设置宽度、高度、左侧、顶部、字体大小属性可以在 Chrome 上不模糊。

.cta:hover {
    width: 500px;
    height: 500px;
    font-size: 400%;
}

唯一的其他解决方法“可能”是使用动画@keyframes 并设置相当数量的它们〜5或10，它可能会强制纠正每个关键帧之间的模糊。

score 0 · Accepted Answer

在此处输入图像描述我在CSStricks.com上找到了这个：

如果您将转换设置为也使用

translate3d( 0, 0, 0)

它可以修复它，但它确实会导致字体在旋转/变换时有点模糊。见这里：http ://codepen.io/WillsonSmith/pen/4/2

我使用 Jquery，需要修复滑块的 H3 标签。较大的文字对我来说并不模糊。我写了这行

$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px ");

这对我来说最好。我需要 -webkit- 在我的转换前。我不知道为什么，因为其他人说不要使用它。我上传了一张带有一些不同设置的图片。

2 回答 2