需求描述:
系统菜单栏滑出覆盖界面左侧,要求菜单栏有毛玻璃效果。
例如下图MAC OS桌面效果,可模糊看见背景。
可行性调研:
ccs3属性有属性可以高斯模糊
filter:blur(4px);
需要模糊菜单栏下方部分界面。
无法做到css属性跨标签且只应用一部分,因此需要截图菜单栏下层界面,放在菜单栏下层,并模糊该图片。
实现方式:
使用dom-to-image或html2canvas截图,使用StackBlur模糊图片(或者使用blur属性模糊,需要额外性能消耗)。
菜单栏设置背景透明。