反馈与交互 · 点一下的回应
贴纸揭角Sticker peel
- 实物感
- 可探
- 有暗示
指针靠到角上，那一角就翘起来、露出下面一层，像贴纸被指尖挑起。它比「悬停变色」多给了一条信息：这东西可以揭。
什么时候用它
适合「一张卡下面还压着东西」的场合：优惠券、刮刮卡、会员码、活动横幅。别在真的点不动的装饰卡上用 —— 它承诺了「能揭」，揭不开就是骗人。也别让四个角都能揭，一个角就够，多了解不开谜。
参数
clip-path: slant 6→110px · transform: curl scale 0.35→1.1 · lift 90ms ease-out / fall 220ms ease-in
配方
贴纸揭角 → slant 6 → 110px @ 90ms ease-out贴纸揭角 → scale 0.35 → 1.1 @ 90ms
给 AI 的一句话
做一个贴纸揭角：右下角那一块是指针靠近就翘起来的。判断条件是「指针到右下角的距离」而不是悬停命中 —— 距离小于 134px 就开始揭，越近揭得越多（0 到 1 映射到斜边 6px 到 110px），这样指针还在卡片外面时就已经有反应了。用 clip-path 的 polygon 把上层沿右上到左下的斜边切掉一块，露出下面的内容；再叠一个三角形的卷角色块，透明度与揭起量一起变，并按揭起量缩放和轻微旋转，加一层向左上的投影。揭开用 90ms 的一阶跟随（主动作），落回用 220ms（余势）—— 反过来就很假。