Html 如何防止CSS变换产生模糊？

我在使用CSS的缩放功能时遇到了一些问题。每当我放大一个元素时，它就会变得有点模糊，即使它不是一个图像，只是一个简单的文本元素

我正在使用Hover.css的代码在代码中生成一个div。但正如您在Hover.css上看到的，如果将鼠标悬停在“Grow”上，它也会变得有点模糊

CSS代码：

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

---

如何才能像上面的示例那样增长元素，但使所有内容都像以前一样清晰？

您是否考虑过在默认情况下缩小元素的比例。然后在悬停/激活时将其缩放为1

CSS

---

正如这里所建议的，您可以做的是，首先使元素与悬停时一样大，然后将其缩小到初始大小，如

transform:scale（.5，.5）然后悬停切换缩放到
变换：缩放（1，1）

您需要删除
-webkit背面可见性：隐藏；
背面可见性：隐藏
并将透视图（1px）添加到如下比例
-webkit转换：透视图（1px）比例（1.1）；
转换：透视（1px）比例（1.1）这似乎修复了chrome中的模糊。下面是一个例子，它并不完美，但我希望它能有所帮助。
您可以增加元素的大小，使其比例小于1。5，然后在
悬停
/
焦点
/
活动
或任何事件上将比例扩展为1（不超过1），因此，如果要增加缩放比例，则应增加元素大小，而不是比例，以防止模糊效果。


.hvr增长{
位置：绝对位置；
排名前10%；
左：10%；
显示：内联块；
-webkit转换：translateZ（0）；
变换：比例（.5）translateZ（0）translateX（-10%）translateY（-10%）；
字体大小：100px；
-webkit转换：转换400ms；
转换：转换400ms；
}
.hvr增长：悬停，.hvr增长：聚焦，.hvr增长：活动{
变换：缩放（1）
}
我试过了，但是较小比例的元素模糊了，这比以前更糟糕。而且这也不好，因为主元素一开始会更小。你试过字体平滑吗-webkit字体平滑：抗锯齿；
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1);
  transform: scale(1);
}