纯 CSS 无法实现真正的碎纸机吞没动画，仅能通过 clip-path + transform 模拟吸入错觉；真·碎纸效果必须用 Canvas + JavaScript 动态生成碎片并控制运动轨迹。
用 CSS 实现不了真正的“碎纸机吞没”动画
纯 CSS 无法模拟纸张被撕裂、卷入、粉碎的物理过程。它只能做位移、缩放、旋转、透明度变化，或者配合 clip-path 做简单裁切——但“碎纸”需要多片独立运动、随机形变、粒子化，这超出了 CSS 动画的能力边界。
如果你看到某个“CSS 碎纸机效果”，大概率是用了以下之一：
- 预渲染的 GIF 或 APNG（本质是视频帧）
- Canvas 绘制 + JS 控制（真正动态生成碎片）
- CSS 配合大量伪元素 + 关键帧模拟“近似感”（视觉欺骗，仅限特定角度）
用 clip-path + transform 做最接近的“吞没”错觉
这是唯一能在不写 JS 的前提下，让图片看起来像被“吸进去”的可行路径。核心思路：让图片沿 Y 轴快速缩小 + 向上位移 + 透明度归零，同时用 clip-path 从底部开始收缩遮罩，模拟“被卷入机器口”的过程。
常见错误现象：clip-path: inset(0) 直接设成 inset(100% 0 0 0) 会跳变，没有过渡；transform: scale(0) 缺少 transform-origin: bottom center 会导致缩放中心不对，不像“被吸下去”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给图片加
transition: clip-path 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s; - 点击时设
clip-path: inset(100% 0 0 0); transform: scale(0.8) translateY(-50px); opacity: 0; - 必须加
transform-origin: bottom center;，否则缩放像“塌陷”而非“吸入” - 注意兼容性：
clip-path在 Safari 旧版本需-webkit-clip-path
真·碎纸效果必须用 Canvas + JavaScript
所谓“碎纸”，本质是把原图按网格切割成几十上百个 canvas 小块，每块赋予随机旋转、位移、缩放和消失时间。CSS 无法单独控制每个碎片的运动轨迹。
使用场景：营销页点击抽奖、活动页彩蛋、教育类交互演示。性能影响明显——碎片数超过 80，低端手机会出现卡顿。
关键参数差异：
- 碎片数量：
pieces = 6×10比12×20更轻量，也更“像碎纸条” - 运动方向：优先向下+向内偏移（模拟卷入），而非全向爆炸（那是“炸开”，不是“吞没”）
- 销毁时机：每片延迟
Math.random() * 300 + 100ms 消失，避免整齐划一 - 不要用
requestAnimationFrame手动逐帧更新每片位置——改用 GSAP 或 anime.js 更稳
容易被忽略的细节：图片加载与事件绑定时机
很多人把动画逻辑写在 click 回调里，但图片还没加载完成（naturalWidth === 0），Canvas 切割就失败，结果白屏或报错 InvalidStateError: The image has no contents。
正确做法只有两个：
- 监听图片的
load事件后再绑定点击逻辑 - 或用
img.decode()Promise 确保解码完成（尤其 WebP/AVIF）
另外，移动端要加 touchstart，否则 iOS Safari 点击无响应；且需防止连续点击触发多次动画，得加 pointer-events: none 临时禁用。
碎纸效果的复杂点不在“怎么动”，而在于“动得像真的一样”——那取决于碎片数量、运动曲线、遮罩节奏、音效配合。单靠 CSS，你最多做到“关抽屉”，做不到“碎纸机”。
