有一个盒子,里面有一些文字。当我悬停它时,我想用动画放大/缩放它。动画结束时,模糊效果将从容器中删除。有没有办法消除过渡后的模糊效果?
守则 (http://codepen.io/ptongalex/pen/dNZdmV):
.box {
border: solid red 2px;
width: 100px;
position:relative;
text-align:center;
left: 50%;
top:200px;
}
.box:hover {
-webkit-filter: blur(0);
-webkit-transform: translateZ(0);
transform: scale(3);
transition: transform 1s;
}
<div class='box'>
<h1>Text</h1>
</div>
一种解决方案可能是将盒子开始大,然后将其缩小到您想要的大小。然后,将鼠标悬停在框上时,将其放大到 1。通过这种方式,您可以防止框及其内容在缩放时像素化/模糊:
.box {
border: solid red 6px;
width: 300px;
position:relative;
text-align:center;
font-size: 54px;
transform: scale(0.33);
margin: 0 auto;
transition: transform 1s;
}
.box:hover {
transform: scale(1);
}
<div class='box'>
<h1>Text</h1>
</div>
这应该有效。
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
但在某些情况下,如果使用过渡,元素将在动画过程中模糊。