如何防止 CSS 转换模糊？

Question

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

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

http://ianlunn.github.io/Hover/

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);
}

怎么可能像上面的例子那样生长元素，但让一切都像以前一样锋利？

Answer 1

您可以增加元素的大小并为其指定小于 1 的比例，例如 0.5，然后在hover//或任何事件上将比例扩展到 1（不超过 1 focus）active，因此如果您想增加比例缩放，则应该增加元素大小不是比例，以防止模糊效果。 https://jsfiddle.net/qb2Lhtz9/11/

.hvr-grow {
  position: absolute;
  top: 10%;
  left: 10%;
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: scale(.5) translateZ(0) translateX(-10%) translateY(-10%);
  font-size: 100px;
  -webkit-transition: transform 400ms;
  transition: transform 400ms;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
   transform: scale(1)
}

<a href="#" class="hvr-grow">Grow</a>