缩放元素时出现不必要的模糊效果

Question

我正在尝试消除在缩放转换过程中发生的模糊效果。过渡期间的图片是可以通过的，但这个字体过渡是如此丑陋…有什么方法可以解决这个问题吗？我试过"translateY(0) translateZ(0)“，但没有任何效果。当效果完成后，一切都会恢复正常。

​

.circlee
{
    display: inline-block;
    margin-right: 50px;
    /*margin-top: 200px;*/
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px black solid;
    background-image: url(http://lorempixel.com/200/200/);
    transition: all 1s ease-in-out;
}
.circlee:hover
{
transform: scale(1.15);
}    

<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>

​

Answer 1

从它的外观看，你的图像只有200px乘200px。悬停效果会导致图像拉伸，从而导致质量损失/模糊。对于分辨率为72像素的210px x 210px的...an图像，您可以获得更高质量的图像，以便在拉伸时不会丢失图像质量。或者你可以让你的圆圈190px乘以190px，然后在悬停时将其放大到200px，从而得到与背景图像完全相同的大小。或者只需更改悬停时的宽度和高度。示例：

​

.circlee
{
    display: inline-block;
    margin-right: 50px;
    /*margin-top: 200px;*/
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 2px black solid;
    background-image: url(http://lorempixel.com/200/200/);
    background-size:100% 100%;
    transition: all 1s ease-in-out;
}
.circlee:hover
{
 width:200px;
    height: 200px;
}    

<div class="circlee">wwww</div>
<div class="circlee">xxxx</div>
<div class="circlee">ssss</div>

​

像黄油一样工作！