试一下这个,对我来说效果很好!
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
简而言之,transform: scale
实际上是在缩放原始图像,因为您让浏览器的渲染引擎自行决定应该放置什么,所以您得到了模糊的图像。尝试使用:
img {
transform: scale(.9)
}
img:hover {
transform: scale(1)
}
Aaron Sibler在这篇文章中回答了我的问题。
我也遇到了这个难题。在你的例子中,你需要将img向下变换,例如“transform: scale(0.7)”,然后在悬停时将其放大到原始尺寸,例如“transform: scale(1.0)”。
缩放值是相对于原始图像尺寸而不是屏幕上的当前尺寸,因此缩放比例为1始终等于原始图像的尺寸。
我在这里使用了这个技术;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
我已经阅读了所有的评论,并尝试了人们提出的所有解决方案。但除了rotate(360deg)之外,没有什么真正好的方法。除此之外,其他方法会在图像上产生卡顿或者最初变得太模糊。但是如果不隐藏它,旋转看起来很奇怪。所以我决定旋转0.0000001度,这样就可以了!图像只在过渡期间模糊,但在结束和开始时它是清晰的。也许我的图片太小了。
因此,我的当前解决方案是将此部分添加到CSS中(而无需其他内容):
img {
transform: rotate(0.00000000001deg);
}
我曾经遇到过SVG缩放和模糊图像的问题。我将背景图像放大到4.5倍,但是图像在放大时变得非常模糊。
后来我发现可以先进行缩小操作transform: scale(0.7)
,然后再进行放大操作transform: scale(1.0)
。但是这对于我的动画来说意味着需要进行大量的重构。因为我的动画非常复杂,包含多个缩放和变换等操作。
最终,我选择保持原样,并添加了一个伪缩放宽度。浏览器似乎会重新渲染每一帧,但由于宽度实际上并没有改变,因此您仍然可以使用transform: scale(x.x)
进行缩放,并获得非常清晰的图像。
也许有人可以证实这一点。以下是我的代码。在我的情况下,图像宽度为86px,放大了4.5倍。
<div class="overall-scale">
<div class="image-scale"></div>
</div>
@keyframes overall-scale {
0% {
transform: scale(1);
}
100% {
transform: scale(4.5);
}
}
@keyframes image-scale {
0% {
width: 86px;
}
100% {
width: 86px;
}
}