缩放转换后如何消除模糊效果？答案

【问题标题】：How to remove blur effect after scale transition?缩放转换后如何消除模糊效果？
【发布时间】：2017-06-14 00:39:27
【问题描述】：

有一个盒子，里面有一些文字。当我悬停它时，我想用动画将它放大/放大。当动画结束时，模糊效果从容器中移除。过渡后是否有消除模糊效果的方法？

守则 (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>

【问题讨论】：

我看不到任何模糊效果...
@Omnitored 是的，你可以，在缩放时查看文本
你没有使用任何模糊。过滤器： blur() 采用 px 值。值越大模糊越大。您已指定 0
@Viktor 仍然有模糊效果:)
好的，那么它与您指定过滤器的事实无关：blur()。看看stackoverflow.com/questions/6411361/…

标签： css

【解决方案1】：

一种解决方案可能是先让您的盒子变大，然后将其缩小到您想要的大小。然后，当您将框悬停时，将其放大到 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>

【讨论】：

在动画过程中我看起来仍然模糊。

【解决方案2】：

这应该可行。

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

但在某些情况下，如果你使用过渡，元素会在动画过程中变得模糊。

【讨论】：