卡片这个东西，本身没什么设计可言——一个圆角矩形加点阴影，谁都会写。真正拉开差距的是卡片之间怎么排、鼠标碰上去发生什么、以及一屏里的注意力被引到哪张上。这三件事属于布局和交互，不属于装饰。
下面这 10 款是童哲网上架的卡片与布局类前端效果，按要解决的问题分三组：第一组是网格与 Bento Grid 版式，管的是「整屏怎么排」；第二组是悬停交互，管的是「鼠标碰上去怎么反馈」；第三组是材质与特殊形态，管的是「这张卡片看起来是什么做的」。
每款都写清楚了依赖什么、适合放哪儿、以及什么时候不该用。
第一组 · 网格与 Bento Grid 版式（01 - 03）—— 管的是整屏怎么排
01. GSAP 便当格首屏 —— 交互密度很高的营销官网开场
GSAP Bento Grid 数字滚动
营销代理公司风格的首屏。进场时顶栏、导航、标题逐词弹出，副标题与按钮依次浮现，随后下方的便当格卡片错落入场。下半部三块卡片各管一件事：服务标签墙（标签自由散落带轻微倾斜，悬停浮起，点击可打乱重排）、数据战绩区（1.2M+、$3M 这类数字滚动递增，点击可重播）、客户评价区（点击轮换，头像与署名同步淡入淡出）。切换导航栏目时，标题文案会整段拆词重排刷新。
它的可复用性做得比较实在：动效参数集中在一条时间轴里，替换文案和配色就能拿去用，不用逐个动画去翻。
两点要注意。一是它是一个首屏，不是一整套站——下面的内容页要自己接。二是大字号无衬线标题配黄黑撞色，品牌感极强，几乎必须换成自己的配色，否则一眼就能看出是同一套模板。另外逐词弹出的入场动画会推迟首屏主标题的呈现时间，做投放页的话建议把标题的入场时长压到最短。
02. GSAP Flip 九宫格图片墙 —— 整个网格会为焦点让位
GSAP Flip + CSS Grid 九宫格 悬停重排
鼠标移到九宫格里任意一张图上，整个网格的行列比例会即时重排——该图放大成为焦点，其余图片同步收缩让位，移开自动回归中心布局。这和常见的「悬停放大」不是一回事：常见做法是那一张变大、压在别人身上；这一款是整个布局重新算了一遍，谁都没被遮住。
技术上的关键是 GSAP 的 Flip 插件：它记录元素变化前后的位置和尺寸，自动补出中间的过渡。CSS Grid 的行列比例一改，元素位置是瞬间跳变的，靠 transition 补不了，Flip 正是为这个场景做的，所以过渡才会顺滑无跳变。
顺带说个很多人还不知道的事：GSAP 的插件现在全部免费了，商用也不例外。 Webflow 在 2024 年 10 月收购 GreenSock，2025 年 4 月宣布把整个库连同过去只对 Club 会员开放的插件（SplitText、MorphSVG 等）一起免费开放，不再需要会员、许可证密钥或 auth token。所以看到「Flip 插件」不用担心授权问题——不过用于正式项目前，还是按惯例去 gsap.com 的许可页面自己确认一遍当前条款。
它的限制是依赖 hover：触屏设备上没有鼠标悬停，整个交互不成立，移动端需要退化成普通网格或者改成点击触发。
03. 滚动驱动的 3D 数据卡片落地页 —— 滚多少动多少
GSAP + ScrollTrigger 滚动进度驱动 深色排版
首屏是三张竖排胶囊卡片，每张分上下两块：上面分类名，下面列这个方向的工具清单，背景衬着向外扩散的弧线和一层细颗粒质感。鼠标移上去卡片跟着指针方向轻微倾斜抬起，移开是弹性回弹而不是生硬复位；鼠标在首屏移动时背景弧线缓慢跟随，形成层次错落的视差。
往下滚，三张卡片分别向左右滑开、中间那张略微缩小、弧线向外扩张、标题渐隐——整段动画跟着滚动进度走，滚多少动多少，可以来回拖。这是 ScrollTrigger 的 scrub 模式，和「滚到某个位置触发一次动画」是两种体验：前者把滚轮变成时间轴的控制器，用户有掌控感；后者只是被动播放。再往下是工具卡片区和数字从 0 跳到目标值的结尾区。
整体是深色底加衬线强调字，克制但有分量，适合工具导航站、AI 产品聚合页、设计工作室作品集、新品发布落地页。
什么时候别用它：滚动绑定动画对「减少动效」用户不友好，也会让键盘和辅助技术的浏览体验变复杂。建议在 prefers-reduced-motion 下直接把三张卡片摆成静态终态，跳过整段过渡。另外这类效果在长页面里只适合用一两处，整站都靠滚动驱动，用户会累。
第二组 · 悬停交互（04 - 06）—— 管的是鼠标碰上去怎么反馈
04. 鼠标跟随光晕描边 —— 核心不到 20 行
CSS + 原生 JS 核心 < 20 行 无第三方库
鼠标移进卡片，一团柔和光晕跟着指针实时移动，透过卡片内层的半透明遮罩渗出，边缘形成一圈会随鼠标游走的高亮描边；移开时平滑淡出，不生硬。实现是 CSS 径向渐变加原生 JS，没有图片素材，没有第三方库。
它是本文性价比最高的一款，理由有三条：
核心代码不到 20 行，读一遍就懂，出问题能自己改
三张卡片的发光颜色由一个变量单独控制，加卡片、换主色只需改一行
性能开销小，容易嵌进已有项目，不用动现有结构
它的效果依赖暗色背景：光晕是靠亮部在暗底上的渗透显出来的，放在白底卡片上基本看不见。适用位置是产品与服务展示卡、暗色主题官网、作品集与定价方案栏目、后台仪表盘卡片。浅色站要这种质感，得先把卡片区域改成深色块。
05. 3D 视差倾斜卡片 —— 内部元素有前后层级
CSS 3D + vanilla-tilt.js 层级视差 边缘微光
鼠标在卡片上移动，整张卡片随光标方向做平滑的三维倾斜，内部的图片、文字和按钮跟着产生前后错落的层级视差，边缘带动态微光。
「层级视差」是它和普通倾斜效果的分界线：普通做法是整张卡片作为一个平面一起转，看着像一块转动的板子；这一款是卡片内的元素处在不同的 Z 轴深度上，转动时位移量不同，才有真实的纵深感。要用好它，得给内部元素规划好层级——通常是背景图在最深处、正文居中、按钮和标签浮在最前，随手堆上去是出不来效果的。
依赖是 vanilla-tilt.js，一个很轻的库，不需要 jQuery。老问题同样存在：触屏没有 hover，倾斜完全不会触发，移动端看到的就是一张静止卡片。这不算 bug，但如果你的流量以移动端为主，那这个效果实际上只有一部分用户能看到，投入产出要重新算。
06. Three.js 着色器流光卡片 —— 同一个交互，重得多的实现
Three.js + GLSL 环形流光 VanillaTilt
把上一款的三维倾斜和一层底层着色器光圈融在一起：光标移入时卡片丝滑偏转，同时背景的环形流光呈现细腻的光影变幻。视觉档次确实比第 05 款高一截，适合高端产品定价页、会员订阅卡片、科技风页面区块、数字资产展示。
把它和第 05 款并排放，是因为这两款正好演示了同一个交互的两种成本：
第 05 款：CSS 3D + vanilla-tilt.js，一个轻量库，几 KB，随便放
第 06 款：Three.js + 自定义 GLSL 着色器 + VanillaTilt，引入的是一个完整的 WebGL 引擎
Three.js 不是小体积的库，而这里它只服务于一张卡片的背景光效。值不值得，取决于你的页面是不是本来就在用 Three.js——如果首屏已经有 3D 场景，加这个几乎零成本；如果整站就这一处，为一圈流光背上一个 WebGL 引擎，多数情况下不划算，第 04 款那 20 行 CSS 光晕能拿到七成的效果。另外 WebGL 在低端设备上的表现要实测，别只在自己电脑上看。
第三组 · 材质与特殊形态（07 - 10）—— 管的是这张卡片看起来是什么做的
07. 液态玻璃名片 —— 比毛玻璃多了一层噪声扭曲
CSS + SVG 滤镜 可拖动缩放 无框架
风景照背景上浮着一张半透明卡片，里面是头像、用户名、仓库数和粉丝数，底下一个关注按钮。它和常见毛玻璃卡片的区别在于多了一步：普通做法只是把背景模糊，这一款在模糊之外还叠了一层 SVG 噪声扭曲，卡片边缘的背景是被「揉」过的，更接近真实玻璃那种不规则折射，也就是苹果那套液态玻璃的路子。
卡片可以用鼠标或手指拖着满屏跑，右下角一对加减按钮能缩放。有个处理很实在：拖动时会临时关掉扭曲滤镜——SVG 滤镜每帧重算的开销不小，拖动时关掉能保证不卡顿，松手再打开。这种取舍是做过真机测试才会有的。
两处上线前必须处理：一是背景图和头像都是外部链接，自己用的时候要换成本地资源，否则哪天对方失效你的页面就开天窗；二是扭曲滤镜对老浏览器支持有限，会退化成普通毛玻璃——这个退化是安全的，不影响使用，但你得知道有一部分访客看到的不是完整效果。
08. 改一个数字，配色自己算出来 —— 纯 CSS 的 oklch 玻璃拟态
纯 CSS oklch 相对颜色 CSS 三角函数
弥散光感的玻璃拟态卡片，配平滑轨道上游走的流光光斑，极光质感。技术上是 CSS 变量 + oklch() 相对颜色 + CSS 三角函数，一行 JS 都没有。
它真正的价值不在长得好看，在于换色的方式：只需要改一个色相数值，整套三配色体系会由数学运算自动推导出来，而且因为算的是 oklch（感知均匀的色彩空间），推出来的配色在明度上是协调的，不会出现「同样调了 30 度，黄色变得刺眼、蓝色却发闷」这种传统 HSL 常见的问题。对做设计系统或者要给客户提供换肤能力的项目，这套思路比手工配十套色板可靠得多。
代价是浏览器门槛：oklch 的相对颜色语法和 CSS 三角函数都属于比较新的特性，主流浏览器是近几年才陆续支持的。上线前要确认你的用户群里旧版本浏览器和老安卓 WebView 的占比，并用 @supports 给一个静态配色的回退——不然在不支持的环境里，颜色可能整个算不出来。
09. 配色随图联动的商品卡 —— 一次滑动带动整页换色
CSS + jQuery + Slick 全局配色联动 电商单品
卡片居中展示商品主图，左右滑动或点圆点切换不同配色款式。关键在于切换时不只是换图：整页的斜切渐变背景随之淡入更替，价格文字、按钮描边、按钮内的渐变填充全部同步换色，底部圆点指示器也按各款配色分别着色。一次滑动带动全局视觉联动，选色的过程变得直观，还有点仪式感。
这个做法对球鞋、服饰、数码这类「同款多配色」的商品特别对路——用户在电商页上挑颜色时，最想知道的其实是「这个色穿/用起来是什么感觉」，整页跟着变色比一个小色块管用得多。适用于单品促销落地页、众筹与新品预热页、产品详情页的图集模块。
技术栈要看清楚：它基于 jQuery + Slick 轮播插件，属于较早一代的组合。功能没有问题，Slick 到今天仍然稳定好用，但它意味着页面里要带上 jQuery。如果你的电商站本来就是 jQuery 体系（不少成熟商城模板都是），那没有额外成本；如果是 Vue / React 工程，得考虑用现代轮播库重做这个联动逻辑——联动本身不复杂，就是切换时同步更新一组 CSS 变量。
10. Three.js 洗牌照片墙 —— 卡片是真的在弯
Three.js（WebGL） 22 张照片卡 逐顶点形变
22 张照片卡最初平摊叠成一叠，点击后牌堆一分为二、两侧同时向上弯折成「桥」，交错咬合落回一叠，再逐张抬起、翻正、缩放，最终排成 6 列整齐的照片网格。整套动作被拆成分裂、预弯、交错、合桥、瀑布、归位几个阶段串联，靠时间差和每张卡的延迟错位撑起节奏。
有个技术细节决定了它的质感：卡片的弯曲不是贴图假象，而是逐顶点按圆弧半径实时变形出来的，所以桥形的张力和回弹看起来有真实纸牌的韧性。用贴图或者 CSS 3D 模拟的弯折，在转角处总会露馅，这一款不会。
作者把使用边界写得很清楚，我照实转述：它整屏铺满 canvas，适合当首屏视觉，正文内容页放它会抢注意力。 另外它带 ?embedded 参数可以切成透明背景，方便嵌进现有页面。要自己用的话记得换图——默认走的是随机图源占位，不换的话上线后显示的是别人的照片。
依赖 WebGL，这一点和第 06 款一样：低端设备要实测，不支持的环境要准备静态封面兜底。它适合摄影作品集首屏、创意机构官网、活动开场页、数字藏品与卡牌类产品展示。
怎么挑：先确定这块地方要不要抢注意力
卡片效果最容易犯的错，是把「首屏级」的效果放到内容区里去。这批十款按注意力权重排一下，选型会清楚很多。
要当主视觉、允许抢注意力的位置（首屏、开场页、发布会页）——第 01、03、10 款。它们都是整屏级的，有明确的入场节奏，用户进来第一眼就该看它。代价是加载和性能成本高，一个页面顶多放一处。
内容区的卡片，需要质感但不能喧宾夺主（服务卡、定价卡、作品网格）——第 04、05、07 款。它们的共同点是静止时安静、交互时才出效果，用户扫页面时不会被打断，真去看某一张时才有反馈。这是内容区最合适的性格。
整屏要排一堆同级内容，想引导视线（图片墙、案例网格、后台看板）——第 02 款。它解决的是「一屏九张图，用户不知道看哪张」的问题。
要给整站定配色或提供换肤能力——第 08 款不是拿来直接抄一张卡片的，它给的是一套颜色推导方法，值得单独研究。
电商单品页——第 09 款，直接对口。
再补一条通用的：本文有五款依赖鼠标悬停（第 02、04、05、06 款）或依赖 WebGL（第 06、10 款）。 上线前把两件事排进任务里——移动端的退化方案，和 prefers-reduced-motion 下的静态版本。这两件事补起来都不难，漏掉了却会让一部分用户看到的是残缺页面。
常见问题
Q：Bento Grid 是什么？跟普通网格有什么区别？
A：Bento Grid（便当格）指的是大小不等的格子拼在一起，像日式便当盒那样分区的版式——有的格子横跨两列放主打信息，有的是小方块放数据或图标，整体拼成一个完整矩形。它和普通网格的区别在于：普通网格每个格子等大，信息是平权的；便当格通过格子尺寸直接表达了优先级，用户不用读完就知道哪块重要。它适合一屏内要塞多种类型信息的场景——产品功能概览、数据看板、机构首屏，本文第 01、02 款都是这个路子。要注意的是格子的大小差异要跟内容重要性对得上，纯粹为了错落而错落，反而让人不知道该看哪。
Q：卡片悬停效果在手机上都失效，那还值得做吗？
A：值得，但要换个思路。首先确认你的流量结构——如果移动端占七成以上，那把预算压在 hover 效果上本身就是错配。其次，hover 效果在移动端不该是「什么都没有」，而该有一个替代方案：常见做法是把悬停态改成「进入视口时触发一次」，或者改成点击触发。技术上用 @media (hover: hover) 判断设备是否真的支持悬停，比判断屏幕宽度准确得多——现在有带触屏的笔记本，也有连了鼠标的平板，光看宽度会判断错。本文第 04 款的光晕、第 05 款的倾斜都建议这么处理。
Q：为了一个卡片效果引 Three.js 或 GSAP，划算吗？
A：分两种情况。GSAP 相对好接受：它体积不算大，用途广（滚动动画、时间轴编排、Flip 布局过渡都靠它），一个稍微讲究点的营销页面通常不止一处用得上，而且现在插件全免费，商用也没有授权成本。Three.js 就要慎重：它是一个完整的 WebGL 引擎，如果整站只有一张卡片用到它，通常不划算——先问一句「用 CSS 能不能做到七成效果」，多数情况答案是能，本文第 04 款对第 06 款就是这个关系。真正值得上 Three.js 的，是页面本来就有 3D 场景，或者那个效果确实无法用 CSS 替代（比如第 10 款的逐顶点弯折）。
Q：这些效果会拖慢页面吗？对 SEO 有影响吗？
A：对内容收录基本没影响——卡片里的文字是正常的 HTML，搜索引擎照样能读。有影响的是性能指标，而性能是排名因素之一：首屏铺满的 WebGL canvas（第 10 款）、大体积的动画库、需要等待入场动画才出现的主标题（第 01 款），都会拖累加载和首屏渲染的表现。几个务实的做法：把动画库放到主内容之后加载；首屏文字用 HTML 直接渲染、不要靠 JS 生成，这样即使脚本没跑起来内容也在；整屏 canvas 那类效果考虑做成滚动到位再初始化。说到底，一个页面挑一到两处重效果就够了，堆满的代价是每个效果都被互相拖累。
