Question

我在使用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);
}

如何像上面的例子一样增长元素，但是像以前一样使一切变得清晰？

Answer 1

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

＆＃13;

active

＆＃13;

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

＆＃13;

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

根据此处的建议，您可以执行的操作首先使元素与悬停时一样大，然后将其缩小到初始大小，如a1 = d['aa'] a2 = d['sdsd']，然后将悬停切换比例调整为transform: scale(.5, .5);

您需要删除transform: scale(1, 1);并添加透视图（1px）才能按比例缩放-webkit-backface-visibility: hidden; backface-visibility: hidden;这似乎可以解决Chrome中的模糊问题。这是一个例子https://jsfiddle.net/qb2Lhtz9/9/它不完美，但我希望它可以帮助..

如何防止CSS转换模糊？

3 个答案: