如何防止 CSS 转换模糊

Question

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

我正在使用 Hover.css 的代码在我的代码中使 grow 成为一个div。但正如您在悬停时看到的那样.css如果您将鼠标悬停在"增长"上，它也会变得有点模糊。

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 这样的 .5，然后在 hover/focus/active 或任何事件上将比例扩展到 1（不超过 1），因此如果要增加缩放比例，则应增加元素大小而不是比例以防止模糊效果。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>

Answer 2

您是否考虑过默认情况下将元素缩放得更小。然后在悬停/活动时将其缩放为 1？

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

Answer 3

您可以

做的，正如此处所建议的，您首先使元素与悬停时一样大，然后将其缩小到初始大小（如transform: scale(.5, .5);然后在悬停时将比例切换到transform: scale(1, 1);

您需要删除-webkit-backface-visibility: hidden; backface-visibility: hidden;并添加透视（1px）以像这样缩放-webkit-transform: perspective(1px) scale(1.1); transform: perspective(1px) scale(1.1);这似乎可以修复铬中的模糊。这里有一个例子 https://jsfiddle.net/qb2Lhtz9/9/它并不完美，但我希望它能有所帮助。