有一个盒子,里面有一些文字。当我将其悬停时,我想用动画将其缩放/放大。当动画结束时,模糊效果将从容器中移除。有没有办法消除过渡后的模糊效果?
代码 ( 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>
关于css - 如何消除尺度转换后的模糊效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41909090/