Question

我想在悬停时缩放一些文字，但是，在动画期间，文字显得模糊（虽然很难看）。我怎样才能防止模糊？

HTML：

<link href='https://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>

<div class="title">LogoTest</div>

CSS：

body {
  font-family: "Bitter";
  margin: 100px;
}

.title {
  color: #333333;
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
  background: white;
  padding: 16px 24px;
  display: inline-block;
  transition: transform 0.5s ease-in-out;
}

.title:hover {
  transform: scale(0.96);
}

Answer 1

见这里：https://jsfiddle.net/vt7yxhcw/10/

更改了CSS

.title {
  -webkit-font-smoothing: antialiased;
  transform: perspective(1px) scale(0.99999) translate3d( 0, 0, 0);
}

.title:hover {
  transform: perspective(1px) scale(0.96) translate3d( 0, 0, 0);
}

我添加了一个略小于1（不可识别）的初始比例，以使浏览器最初进行缩放。添加-webkit-font-smoothing: antialiased用于防止模糊的子像素平滑。添加translate3d( 0, 0, 0)会产生一些初始模糊，但也会使过渡模糊变得平滑。 perspective()为元素提供了一些伪3D深度，因此浏览器使用其他一些算法进行渲染 - 根据我的经验，这也会减少整体模糊。

您根本无法禁用模糊，但使用它会将其降低到最低程度。这就是浏览器如何渲染像素计算。

使用转换动画时缩放比较模糊

1 个答案: