如果我使用 CSS scale()
缩放一个元素,它在过渡时会变成像素化。但是当转换完成后又恢复正常了(引用截图1)。然而,它只发生在 webkit 浏览器中(在 Chrome 和 Opera 中测试)
.foo {
background: #4FC093;
display: block;
position: absolute;
width: 20px;
height: 20px;
box-shadow: 0 0 10px inset;
margin: 0 auto;
border-radius: 50%;
left: 50%;
top: 50%;
cursor: pointer;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
.foo:hover {
-webkit-transform: scale(20);
-moz-transform: scale(20);
-ms-transform: scale(20);
transform: scale(20);
}
<div class="foo"></div>
截图 1
可能的解决方法
我也尝试过使用 scale3d()
来反转这个 div 的比例,正如建议的那样 here
但它会导致 Google Chrome 中的 div 周围出现锯齿状边缘。
.foo {
background: #4FC093;
display: block;
position: absolute;
width: 400px;
height: 400px;
box-shadow: 0 0 200px inset;
margin: 0 auto;
border-radius: 50%;
cursor: pointer;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
-webkit-transform: scale3d(0.05, 0.05, 0.05);
-moz-transform: scale3d(0.05, 0.05, 0.05);
-ms-transform: scale3d(0.05, 0.05, 0.05);
transform: scale3d(0.05, 0.05, 0.05);
}
.foo:hover {
-webkit-transform: scale3d(1, 1, 1);
-moz-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
<div class="foo"></div>
我不希望边缘参差不齐。我试过在这里使用 -webkit-backface-visibility: hidden
但没有成功。我知道有一个名为 -webkit-font-smoothing
的属性,我们可以在其中将字体平滑设置为 antialiased
。有什么方法可以为 div
设置 antialiased
吗?
截图 2
最后,这不是我的问题的解决方案,我想避免使用此解决方法,因为我必须手动完成并计算 scale3d()
的参数值.
我在这里期待第一个案例的解决方案。
最佳答案
是的,有一个修复方法,在初始状态下使元素变大并缩小。然后将鼠标悬停缩放到 1,现在它非常平滑且没有像素化。
.foo {
background: #4FC093;
display: block;
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0 0 10px inset;
margin: 0 auto;
border-radius: 50%;
left: 50%;
top: 50%;
cursor: pointer;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
-webkit-transform: scale(.20);
-moz-transform: scale(.20);
-ms-transform: scale(.20);
transform: scale(.20);
}
.foo:hover {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
关于css - 为什么 'transform: scale()' 上的过渡会使元素在 webkit 浏览器中变得像素化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25590315/