混合菜单背景效果

Question

我正在尝试在Ionic中创建此菜单背景效果，但我不知道如何使用它来重新创建它。

Link

起初我使用了不透明度，但这并没有给我正确的效果。我也添加了模糊，但没有运气。

.menu-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  background: rgb(43,49,81);
  -webkit-filter: blur(5px);
  opacity: .8;
}

编辑：不是在谈论动画。

Answer 1

通过上述解决方案，我在菜单悬停的整个内容中添加了模糊过滤器。

简而言之：

<div id="menu"></div>
<div id="content">
  <!-- content goes here -->
</div>

CSS

#menu{
 opacity:0.9;
}
#content{
   filter: blur(4px); -webkit-filter: blur(4px);
}