Question

你好，我已经和它斗争了一段时间了。我有一个按钮（即使是里面有文本的div），我试图稍微改变一下。在变换过程中，文本显示模糊，然后弹出一些焦点。有没有办法让文本保持相同的大小？或者在变换期间渲染它？

我已经尝试了rotate(0.02deg)，如下所示。还尝试了-webkit-transform: translateZ(0px)和-webkit-backface-visibility: hidden，这些都没有给我一个平滑的文本转换。

    .smooth-pop:hover {   
    -webkit-backface-visibility: hidden;
    -webkit-transform:scale(1.1) rotate(0.02deg);     
    transform: scale(1.1) rotate(0.02deg);        
}

查看下面的代码片段可以了解正在发生的事情。这包含了我的所有CSS功能。它在IE中似乎没问题。

＆＃13;

.smooth-pop {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /*-webkit-font-smoothing: antialiased;*/
}
.smooth-pop::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, .20);
  content: "";
  border-radius: 4px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.smooth-pop:hover {
  -webkit-backface-visibility: hidden;
  -webkit-transform: scale(1.1) rotate(0.02deg);
  transform: scale(1.1) rotate(0.02deg);
  /*-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .20);*/
}
.smooth-pop:hover::after {
  opacity: 1;
}

＆＃13;

<div class="smooth-pop" style="width:50px; height:50px; border:1px solid black">
  test
</div>

＆＃13;

Answer 1

这是因为使用了CSS转换属性。使用它可以模糊元素以获得更好的过渡效果，我建议改变你的宽度和高度，而不是使用变换属性。

在* css转换期间模糊的文字* - Chrome

1 个答案: