裁剪揭示 · Clip-path Reveal
英文：Clip-path Reveal
动效与交互难度：入门 ★
🗣️一句话大白话
用裁剪路径从一角、一边"擦出"元素。比淡入更有设计感，像幕布拉开或页面被擦亮。clip-path 可做多种形态：从下往上擦、从左上角展开、inset 收缩。这个动效"高级感"强，但复杂路径重绘成本高、兼容要留意。AI 容易把 clip-path 用成"形状裁切"，要说清是"路径从 0 到完整"的动态揭示。
🖼️样图参考
🎬真实场景
图片入场、区块切换、封面揭示、菜单展开
📮你可以这样说
「【图像模型版】让 [图片] 像幕布一样从下往上擦出：裁剪范围 0%→100%，同时轻微淡入，时长 600ms，先快后慢。 【HTML/CSS/JS 版】[图片] 用 clip-path: inset(100% 0 0 0)→inset(0) 入场，600ms ease-out。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：clip-path 只做形状裁切；实际是"路径从 0 到完整"的动态揭示
- ▸复杂多边形路径动画性能重
🚫什么时候别用
- ✗滚动长页中的高频动效
- ✗复杂圆角+投影叠加时
🧩常见变体
从下上擦从左右擦圆角展开inset 收缩
💡小贴士
- ✦clip-path 动画优先用 inset() 或简单多边形，性能稳
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗