Question

有一个包含一些文字的方框。当我将鼠标悬停时，我想用动画缩放/缩放它。动画结束时，会从容器中删除模糊效果。无论如何都要在转换后删除模糊效果？

代码（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>

Answer 1

一种解决方案可能是让您开箱大，然后将其缩小到您想要的尺寸。当您将鼠标悬停在盒子上时，将其缩放到1.这样可以防止盒子及其内容在缩放时出现像素化/模糊：

＆＃13;

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

＆＃13;

<div class='box'>
  <h1>Text</h1>
</div>

＆＃13;

Answer 2

这应该有用。

filter: none; 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

但在某些情况下，如果您使用转换，则动画期间元素将会模糊。

如何在比例转换后删除模糊效果？

2 个答案: