Question

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

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％）时，也会出现此效果（旋转会使其他元素变得模糊）。

例如，如果你使用平移来垂直居中一个模态窗口，你就不能有旋转效果（lika a spinning cog），因为这两种效果的组合使得模态中的所有内容都模糊不清。

Answer 2

很好的问题，并且弄出一个非常讨厌的事情：）

我看了你的小提琴，发现这个效果似乎与元素定位有关 - 因为它们都是相对的，当两个孩子都被浏览器重绘时，整个容器被重绘并且模糊闪烁。

如果您提供 .repeat 和 .blur

position:absolute;

你的问题将得到解决：）

另外 - 我注意到当旋转过渡发生时，边界半径会丢失。这是通过向父元素 .player

添加非零透视图来解决的

查看 updated jsfiddle 并告诉我您的想法。

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

2 个答案: