MOTION EFFECT
贴纸撕起Sticker Peel
卡片右下角翘起并露出背面阴影，像一张贴纸被掀起一角。ReactBits 的 Sticker Peel 用 3D transform 与阴影深度实现。
效果预览
Sticker Peel
适合用在哪
优惠券、限时标签、需要「可以撕下来」暗示的卡片；也常做成 hover 提示可拖拽。
容易踩的坑
- 翘起的角遮住了卡片右下角的价格或按钮，关键信息被挡。
- 暗示可撕却点了没反应，用户会反复尝试拖拽而产生挫败感。
- 卷角颜色固定白色，在深色主题里像一块突兀的贴片。
设计提示词 · Prompt
贴纸撕起（Sticker Peel）：卡片圆角 10px、主色渐变底。::after 是右下角一个 52×52px 的方块，背景用 linear-gradient(315deg, #fff 47%, #cbd5e1 48%, #e2e8f0 58%, rgba(0,0,0,.16)) 模拟纸背与投影，盒子阴影 -6px -6px 14px -6px rgba(0,0,0,.35) 做翘起厚度。动画 3.6s ease-in-out 循环：前 60% 保持 border-top-left-radius:0，后段升到 46px，那块角就「卷」起来了。真实交互版把进度绑到鼠标距离。
Sticker Peel: the card has border-radius 10px and a primary-color gradient background. ::after is a 52×52px square in the bottom-right corner, with background linear-gradient(315deg, #fff 47%, #cbd5e1 48%, #e2e8f0 58%, rgba(0,0,0,.16)) to simulate the paper backside and its shadow, and box-shadow -6px -6px 14px -6px rgba(0,0,0,.35) for the lifted thickness. The animation loops 3.6s ease-in-out: for the first 60% it keeps border-top-left-radius:0, then rises to 46px, so the corner "curls" up. The real interactive version binds the progress to mouse distance.
常见搭配
同一页面里经常和「贴纸撕起」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="m-peel"><span class="m-peel__t">Sticker Peel</span></div> </div>