需求描述:
系統菜單欄滑出覆蓋界面左側,要求菜單欄有毛玻璃效果。
例如下圖MAC OS桌面效果,可模糊看見背景。
可行性調研:
ccs3屬性有屬性可以高斯模糊
filter:blur(4px);
需要模糊菜單欄下方部分界面。
無法做到css屬性跨標籤且只應用一部分,因此需要截圖菜單欄下層界面,放在菜單欄下層,並模糊該圖片。
實現方式:
使用dom-to-image或html2canvas截圖,使用StackBlur模糊圖片(或者使用blur屬性模糊,需要額外性能消耗)。
菜單欄設置背景透明。