Question

我在自定义样式表中悬停按钮转换。它允许我从<a href>或<div>创建按钮。在此转换过程中，字体以奇怪的方式闪烁。你能否告诉我为什么以及如何解决它？

这是scss代码： https://gist.github.com/rafpiek/7e1b2df5690baa3b02e88eee10adfb98

和视频： https://www.youtube.com/watch?v=4c4D96FukuQ&feature=youtu.be

＆＃13;

.button {
  text-decoration: none;
  color: #ECECEC;
  font-size: 20px;
  height: 40px;
  width: 100px;
  background: #B3595F;
  display: inline-block;
  transition: all 0.30s linear;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 3px;
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
  font-weight: bold;
}
.button:-webkit-any-link {
  color: #ECECEC;
}
.button:hover {
  transform: scale(1.07);
  color: #ECECEC;
}
.button:active, .button:focus, .button:visited {
  text-decoration: none;
  color: #ECECEC;
}
.button.blue {
  background-color: #2C92FF;
}
.button.red {
  background-color: #FF2113;
}
.button.green {
  background-color: #1EBE32;
}

＆＃13;

<button class="button">button</button>

＆＃13;

Answer 1

在.button：

中试试

-webkit-font-smoothing: antialiased;

Answer 2

这是因为浏览器在动画期间更改了文本抗锯齿类型（新的GPU隐式图层）导致AFAIK。

有关原因的更多信息，此处fixes - ＆gt; How to prevent Webkit text rendering change during CSS transition

Answer 3

可以使用透视和三维缩放来缩小：

transform: perspective(1px) scale3d(1.07,1.07,1);

CSS按钮悬停使文本闪烁

3 个答案: