尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

HTML5+CSS3小实例:毛玻璃质感卡片

发布时间:2026/11/14 3:26:12

资讯中心
01
ARTICLE

HTML5+CSS3小实例:毛玻璃质感卡片

HTML5+CSS3小实例:毛玻璃质感卡片
Glassmorphism 这股风从 macOS Big Sur 吹到现在,热度一点没减。但说实话,很多人写毛玻璃就一句backdrop-filter: blur()完事——出来的效果像蒙了层纱,不是玻璃,是磨砂贴膜。真正好看的毛玻璃,关键不在"模糊多少",而在底下有什么、边框怎么处理、光怎么打上去。这篇就拆一个我自己常用的毛玻璃卡片方案,纯 HTML + CSS,没有 JS,没有框架。先看效果深紫色渐变背景上,两个模糊色块缓缓漂浮。卡片浮在中间,半透明白底 + 微亮描边,像一块真的玻璃搁在彩色雾气上面。鼠标移上去,卡片微微上浮,头像还会调皮地歪一下。拆解四个关键细节1. 背景不能"干净"毛玻璃底下如果是一片纯色,blur 了也看不出效果。所以我用body::before和body::after放了两个大色块,粉色 + 蓝色,加filter: blur(80px)做成光斑,再让它们用floatBg动画慢慢飘。这样玻璃后面的内容一直在"流动",通透感就出来了。2. 模糊
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。