Question

好吧，首先 - 我不确定标题是否得到了很好的解释......

这就是我所拥有的：

#bookknap {
	background-color: #e9533b;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	color: white;
	display:flex;
	align-items:center;
	text-align:center;
	transform:rotate(22.5deg);
  -ms-transform: rotate(22.5deg); /* IE 9 */
  -webkit-transform: rotate(22.5deg); /* Chrome, Safari, Opera */
  -webkit-transition: -webkit-transform 0.5s ease-in-out; /* Animeret rotate */
	font-family:Roboto;
	font-size:1em;
	text-transform:uppercase;
}

#bookknap:hover {
  transform:none;
  -webkit-transition: -webkit-transform 0.3s ease-in-out; /* Animeret rotate */
  cursor: pointer;
}

  <div id="bookknap">Book et møde</div>

当我悬停按钮时，文本质量会在转换时降低吗？为什么，可以修复吗？

应该提到我只想使用HTML和CSS来做这个！

Answer 1

试试这个：

修改按钮两种状态下的属性transform以包含值translate3d(0, 0, 0);

这应该使文本在状态之间看起来更加平滑。

<强>更新

Here是一个带有工作代码的JSFiddle，我还添加了另一个名为-webkit-font-smoothing的属性，它处理WebKit如何呈现字体。这导致几乎不可察觉的变化，但这对于字母的平滑外观有很大帮助。

Answer 2

我不知道为什么，但是border-radius: 50%导致文本在轮换期间进行转换。如果您使用clip-path: circle(50% at 50% 50%)制作一个圆圈，也会发生这种情况。

通过转换悬停时可以降低质量？

2 个答案: