安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
液态玻璃个人名片布局 — 可拖动缩放,CSS+SVG 实现真实折射感
编号:液态玻璃名片

液态玻璃个人名片布局 — 可拖动缩放,CSS+SVG 实现真实折射感

大小 229 KB
总文件 8 个
发布 2026-08-07
更新 2026-08-07
架构 CSS + SVG
分类 前端资源 - 弹出框与提示
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款液态玻璃个人名片效果,用 CSS + SVG 滤镜实现,没有依赖任何框架。风景照背景上浮着一张半透明卡片,里面是头像、用户名、仓库数和粉丝数,底下一个关注按钮。

    它跟常见的毛玻璃卡片不太一样:普通做法只是把背景模糊,这个在模糊之外还叠了一层 SVG 噪声扭曲,所以卡片边缘的背景是被"揉"过的,看着更接近真实玻璃那种不规则的折射感,也就是苹果那套液态玻璃的路子。卡片可以用鼠标或手指直接拖着满屏跑,右下角一对加减按钮能缩放大小,拖动时会临时关掉扭曲滤镜,保证不卡顿——这个处理挺实在。

    要注意背景图和头像都是外部链接,自己用的时候记得换成本地资源。另外扭曲滤镜对老浏览器支持有限,会退化成普通毛玻璃,不影响正常使用。

    适合个人主页、开发者名片、团队成员介绍、简历页面,也可以改成产品卡片或数据展示卡。

模板目录结构

    最新资源

    Three.js照片胶带,拖拽展开与卷轴回收交互特效

    卷轴相册

    Three.js照片胶带,拖拽展开与卷轴回收交互特效
    虚拟货币数字资产与质押管理 HTML 移动端界面模板

    押智台

    虚拟货币数字资产与质押管理 HTML 移动端界面模板
    移动应用与软件产品 HTML 响应式落地页模板

    缤格

    移动应用与软件产品 HTML 响应式落地页模板
    JS横向波浪相册,拖拽惯性与键盘滚动展示特效

    起伏相册

    JS横向波浪相册,拖拽惯性与键盘滚动展示特效
    Canvas 像素飞车 HTML 小游戏,推进躲避与道具反馈源码

    火箭小跑车

    Canvas 像素飞车 HTML 小游戏,推进躲避与道具反馈源码
    汽车维修与养护服务 HTML 响应式网站模板

    驰修

    汽车维修与养护服务 HTML 响应式网站模板