css - 为什么CSS3中的旋转动画会影响其他元素模糊

Question

在我的应用程序中，我有不同的 CSS3 动画效果。全部位于模糊的图像上。我意识到当动画运行时模糊会发生变化。

看看 demo :

div.player {
  width: 400px;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  float:left;
}

.blur {
  background-image: url(/399d59087d2a855.jpg);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(7px);
  -webkit-filter: blur(7px);
  -moz-filter: blur(7px);
  -ms-filter: blur(7px);
  -o-filter: blur(7px);
}
.repeat {
  background: url(/black_2_audio_simple_repeat_2-48.png) no-repeat center;
  width: 48px;
  height: 48px;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}

.repeat:hover {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

知道如何在动画运行时保持模糊图像不变吗？

Answer 1

可能不适用于这种特定情况，但标题匹配。

当其中一个父元素使用transform: translate(50%, 50%)

时，也会出现这种效果(旋转使其他元素变得模糊)。

例如，如果您使用平移来垂直居中模态窗口，则不能有旋转效果(例如旋转的齿轮)，因为这两种效果的组合会使模态中的所有内容都变得模糊。