* css变换期间模糊文本* Chrome

您好，我一直在与此战斗一段时间。我有一个按钮（即使是内部带有文本的div也会发生），我只是稍微转换一下。在转换过程中，文本显示模糊，然后回到焦点。有没有办法让文本保持相同的大小？或者在变换过程中渲染它？* css变换期间模糊文本* Chrome

我试过rotate(0.02deg)，如下所示。也试过-webkit-transform: translateZ(0px) AND -webkit-backface-visibility: hidden没有一个能让我在Chrome中获得平滑的文本转换。

.smooth-pop:hover { 
    -webkit-backface-visibility: hidden; 
    -webkit-transform:scale(1.1) rotate(0.02deg);  
    transform: scale(1.1) rotate(0.02deg);   
}

查看下面的代码片段可以了解发生了什么。这也包含了我所有的CSS功能。在IE中似乎没问题。

.smooth-pop { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    /*-webkit-font-smoothing: antialiased;*/ 
 
} 
 
.smooth-pop::after { 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, .20); 
 
    content: ""; 
 
    border-radius: 4px; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
 
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
 
} 
 
.smooth-pop:hover { 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: scale(1.1) rotate(0.02deg); 
 
    transform: scale(1.1) rotate(0.02deg); 
 
    /*-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .20);*/ 
 
} 
 
.smooth-pop:hover::after { 
 
    opacity: 1; 
 
}

<div class="smooth-pop" style="width:50px; height:50px; border:1px solid black"> 
 
    test 
 
</div>

来源

2016-10-12 ganjeii

这是由于使用CSS变换属性。使用它模糊的元素更好的过渡，我建议变换你的宽度和高度框，而不是使用transform属性。

来源

2016-10-12 13:17:30

嗨迪伦，感谢您的建议，但它没有提供所需的效果，它不会在过渡期间弹出，当我在高度/宽度上使用过渡时，它会滑出和滑下。再次，这是工作在IE – ganjeii

我刚刚在IE浏览器上测试它，它仍然在IE浏览器上变得模糊所以... –

是的，但是这是不同的，如果你看它在铬它结束“弹出”在IE中它仍然是一个平稳的过渡。 – ganjeii

* css变换期间模糊文本* Chrome

回答

相关问题