CSS 类似 iOS 的毛玻璃动态模糊效果

CSS 类似 iOS 的毛玻璃动态模糊效果

提到网页毛玻璃效果,总结下来有以下2种:

  1. 模糊元素本身
  2. 模糊元素后面的内容

早在之前,1就已经可以通过 CSS3 filter 属性实现,而2一直没有一个好的解决方案。对1的运用,也可以达到2的效果,通过模糊图片的一部分,就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是,我们的背景是一个静态的,单一的图片,那么如果我们需要模糊的背景比较复杂呢?仔细观察QQ右栏的标题栏,和下方的应用 Dock,都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

为了能够实现类 iOS 的毛玻璃,我发现了两种方式——

元素复制

稍微研究就能发现,B站导航条的模糊,是用 两个相同的图片,以相同的坐标显示并叠加,再模糊上层的图片 实现的,那么同理,我们如果把整个页面的节点都复制一份,就能对局部模糊了。

第一步,将页面主体内容clone到navbar中,然后使用css3 -webkit-filter滤镜对内容做高斯模糊。
第二步,监听页面滚动事件,计算出scrollTop,将navbar中的内容做同步滚动,同步滚动使用的方法是transform下面的translateY样式,对Y轴做同步偏移。

原文:https://www.jianshu.com/p/e65ae2fd8aea
源码:https://github.com/LucienYang/blur_nav
Demo:https://lucienyang.github.io/blur_nav/

要完整地复制页面元素,显而,性能会不好,这种方法仅适用于元素较少的网站,且实现比较复杂。
但兼容性还是比方法2好的,而且……在没有方法2的情况下,能想到这个办法的人,真是天才……

backdrop-filter

在浏览MIUI11官网时,无意发现了其导航栏的毛玻璃效果——

F12一下,找到了这个还不普及的 CSS 属性——“backdrop-filter”。

这是一个实验中的功能,Firefox 完全不支持,较旧的 Chrome 中需要在 flag 中手动开启,好消息是新版的 Chrome 已经默认支持了,让我们看到这个属性的兼容性会越来越高。

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

能够完美解决“模糊元素后面的内容”的需求,但目前兼容性欠佳,在本人的测试下:

  1. 兼容最新版 Chrome,以及 Chromium 版 Edge
  2. 兼容 Safari,包括 iOS 上的 Safari
  3. 兼容 Windows 10 自带的 Edge(巨硬!争气了一回)
  4. 不兼容最新版 Firefox
  5. 不兼容 Android 上的 Chrome,也不兼容 UC 内核的夸克,也不兼容微信QQ一类

封面来源(Cover source):P站 / 针眼kyoeye / 希儿希儿希儿

武神千万位,希儿第一位
丽塔再插队,策划两行泪

# css

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×