如何防止 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

您是否考虑过让元素默认缩放得更小。然后在 hovered/active?

时将其缩放为 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 2

您可以按照此处的建议，首先将元素设置为与悬停时一样大，然后将其缩小到初始大小，例如 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/它并不完美，但我希望它能对你有所帮助..

Answer 3

您可以增加元素的大小并使其比例小于 1，例如 .5，然后在 hover / focus / [= 上将比例扩展到 1（不超过 1） 14=] 或任何事件，所以如果你想增加比例缩放，你应该增加元素大小而不是比例，以防止模糊效果。 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>

如何防止 CSS 转换模糊？

How to prevent blur from CSS transform?

html

css

transition

css-transitions