如何在颤动中模糊容器

在开发中，有时候需要为用户提供更好的用户体验，这时就需要使用一些特效和动画来使页面更动感。其中，模糊效果是比较常见的一种。然而，当容器颤动时要实现模糊效果可能会比较困难。本文将介绍如何在容器颤动时实现模糊效果。

首先，我们需要在 HTML 中添加一个容器，例如：

<div class="container">
  <img src="image.jpg" alt="image" />
</div>

接下来，在 CSS 中设置容器的样式，例如：

.container {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

然后，我们需要使用 CSS3 的 @keyframes 和 animation 动画来实现容器颤动的效果。例如：

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.container.shake {
  animation: shake 0.5s;
}

最后，我们就可以通过 backdrop-filter 属性来实现容器的模糊效果：

.container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(image.jpg);
  filter: blur(10px);
  backdrop-filter: blur(10px);
}

完整代码如下所示：

<div class="container shake">
  <img src="image.jpg" alt="image" />
</div>

.container {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.container.shake {
  animation: shake 0.5s;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(image.jpg);
  filter: blur(10px);
  backdrop-filter: blur(10px);
}

这样，在容器颤动时就可以实现模糊效果。需要注意的是，backdrop-filter 属性目前只有少数浏览器支持。需要使用前缀 -webkit-backdrop-filter 来兼容。