这是一款液态玻璃个人名片效果,用 CSS + SVG 滤镜实现,没有依赖任何框架。风景照背景上浮着一张半透明卡片,里面是头像、用户名、仓库数和粉丝数,底下一个关注按钮。
它跟常见的毛玻璃卡片不太一样:普通做法只是把背景模糊,这个在模糊之外还叠了一层 SVG 噪声扭曲,所以卡片边缘的背景是被"揉"过的,看着更接近真实玻璃那种不规则的折射感,也就是苹果那套液态玻璃的路子。卡片可以用鼠标或手指直接拖着满屏跑,右下角一对加减按钮能缩放大小,拖动时会临时关掉扭曲滤镜,保证不卡顿——这个处理挺实在。
要注意背景图和头像都是外部链接,自己用的时候记得换成本地资源。另外扭曲滤镜对老浏览器支持有限,会退化成普通毛玻璃,不影响正常使用。
适合个人主页、开发者名片、团队成员介绍、简历页面,也可以改成产品卡片或数据展示卡。