如何防止 CSS 变换模糊？答案

【问题标题】：How to prevent blur from CSS transform?如何防止 CSS 变换模糊？
【发布时间】：2016-07-08 16:30:27
【问题描述】：

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

我正在使用 Hover.css 的代码在我的代码中生成一个 div。但正如您在 Hover.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);
}

如何像上面的例子一样增长元素，但让一切都像以前一样锐利？

【问题讨论】：

你试过字体平滑吗？ -webkit-font-smoothing：抗锯齿；

标签： html css css-transitions transition

【解决方案1】：

您可以增加元素的大小并使其比例小于 1，例如 0.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)
}

&lt;a href="#" class="hvr-grow"&gt;Grow&lt;/a&gt;

【讨论】：

【解决方案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);
}

【讨论】：

我试过了，然后较小的缩放元素变得模糊，这比以前更糟。这也不好，因为最初这样主要元素会更小。

【解决方案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); 这似乎可以修复 chrome 中的模糊。这是一个例子https://jsfiddle.net/qb2Lhtz9/9/它并不完美，但我希望它可以帮助..

【讨论】：