网页毛玻璃效果

本文介绍了如何在网页中实现毛玻璃效果,特别是当系统菜单栏滑出覆盖界面左侧时。通过调研,发现CSS3的高斯模糊属性无法满足只模糊特定部分的需求。因此,提出了利用dom-to-image或html2canvas截图,然后使用StackBlur库模糊图片的方法,以达到预期的毛玻璃视觉效果。同时,菜单栏需设置为背景透明。
摘要由CSDN通过智能技术生成

需求描述:

    系统菜单栏滑出覆盖界面左侧,要求菜单栏有毛玻璃效果。

    例如下图MAC OS桌面效果,可模糊看见背景。

    

可行性调研:

    ccs3属性有属性可以高斯模糊 

filter:blur(4px);

    

    需要模糊菜单栏下方部分界面。

    无法做到css属性跨标签且只应用一部分,因此需要截图菜单栏下层界面,放在菜单栏下层,并模糊该图片。

实现方式:

    使用dom-to-imagehtml2canvas截图,使用StackBlur模糊图片(或者使用blur属性模糊,需要额外性能消耗)。

     菜单栏设置背景透明。  

     

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值