这是一款卡片"灰飞烟灭"式的消散特效。页面中央是一张做工精细的银行卡，芯片、波纹标识、卡号分组、有效期、持卡人姓名一应俱全，全部由 CSS 绘制，没有用任何图片。点击下方按钮，整张卡会在瞬间碎成上千颗微小粒子向外爆开、边飞边淡出，随后可以再新增一张。基于 Disintegrate.js 配合 html2canvas 与 GSAP 实现，冲击力很强。

这款粒子消散特效的四个亮点

粒子来自元素真实外观：先把卡片渲染成像素再拆解，所以碎片带着原卡面的颜色纹理。
卡面纯代码绘制：芯片、波纹、条带全是 CSS 画的，放大不糊、改色方便。
不限于卡片：换成任意元素都能"炸"，通用性远超一次性动画。
粒子密度可调：一个参数决定碎得多细，兼顾观感与性能。

元素是怎么被"拆"成粒子的

其一，先截图再拆解。浏览器无法直接获取一个 DOM 元素的像素数据，所以流程是：用 html2canvas 把卡片渲染成画布，读出每个像素的颜色，再按设定的密度抽样生成粒子。这就是碎片能保留原卡面颜色的原因，也是它比"预先切好的碎片图"更通用的地方。

其二，行为由 HTML 属性声明。要让哪个元素可消散、用哪种粒子、碎得多细，都写在元素自己的 data 属性上，不用为每个元素单独写脚本：

data-dis-type="simultaneous"

换句话说，把这几个属性加到任意元素上，它就获得了同样的爆炸能力。

其三，卡面细节全靠 CSS 堆出来。芯片是几条渐变线加一个圆角块，波纹标识是内联矢量图，卡号按四段分组排布并用等宽字体对齐。没有一张位图——这既让粒子采样结果更干净，也意味着你可以随意改配色和文案而不用重做素材。

怎么换成自己的卡面与元素

卡号、有效期、持卡人、卡种名称都是 HTML 里的普通文本，直接改；卡面配色、条带位置、芯片样式集中在样式表里，改成会员卡、门禁卡、优惠券都不难。

粒子的粗细程度由元素上的一个数值属性控制，调小碎得更细腻但开销更大，源码中对此有注释说明。想把这个效果用在别的元素上，把那几个 data 属性搬过去即可，脚本本身不需要改。

运行提示：本素材依赖 html2canvas 与 GSAP 两个外部库，需以本地服务器方式打开且首次加载需联网；离线使用可将两个库下载到本地再改引用路径。粒子数量较多时对性能有一定要求。运行方法参见压缩包内的帮助文档。

关于这款卡片消散特效的常见问题

能用在其他元素上吗？

可以，这是它最大的价值所在。把那组 data 属性加到任意元素上即可获得同样的消散能力，卡片只是一个演示载体。

粒子太多会卡吗？

粒子密度由一个数值控制，默认值已在观感与性能之间取过平衡。若目标元素面积很大或需要兼顾低端设备，把该值调大即可减少粒子数量。

卡片上的信息能改成中文吗？

能。卡面文字都是普通 HTML 文本，改成中文没有障碍；只需注意持卡人一行原本用的是等宽拉丁字体，中文需补充相应的字体回退。

消散后能恢复吗？

演示里提供了"新增一张卡"的按钮，重新生成一张即可。若需要撤销效果，可在消散前保留原元素副本再择机还原。

适用场景

适合注销账户、删除卡片、清空数据等确认交互的视觉强化，也常用于产品发布页、金融科技类落地页的视觉焦点。下载源码即可查看完整实现。