Question

我尝试删除缩放转换期间发生的模糊效果。过渡期间的图片是可以通过的，但这种字体过渡是如此丑陋......有没有任何方法可以修复它？我试过＆＃34; translateY（0）translateZ（0）＆＃34;但根本没有效果。效果完成后，一切都恢复正常。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 1

从它的外观来看，你的图像只有200像素×200像素。悬停效果导致图像拉伸，从而导致质量损失/模糊。您可以获得更高质量的图像，因此当它伸展时，它不会失去一个例子的质量...... 210px×210px，分辨率为72像素的图像。或者你可以使你的圆圈190px乘以190px并在悬停时将其缩放到200px，从而得到背景图像的精确尺寸。或者只是改变悬停时的宽度和高度。例如：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

像黄油一样工作！

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

1 个答案: