位移与变换 · 移动、旋转、缩放
从触发点生长Origin-aware animation
- 连贯
- 因果清楚
- 高级
弹层从被点击的那个按钮的位置长出来，收回时也回到同一个点，让人一眼看懂它从哪来。
什么时候用它
凡是“点这里、就在这里出现”的浮层都该用它；和触发点无关的整页切换用“共享元素转场”。
参数
clip-path: circle(0% at origin)→circle(140% at origin) · 240ms · ease-out
配方
从触发点生长 → clip-path circle(0% at origin) → circle(140% at origin) @ 240ms ease-out
给 AI 的一句话
让这个弹出菜单从被点击按钮的位置展开：clip-path 从 circle(0% at 按钮位置) 到 circle(140% at 按钮位置)，240ms，ease-out，关闭时反向收回。