状态之间的转换 · A 变成 B
原点圆形扩散Circle-origin reveal
- 从那个点长出来
- 像水波
- 一整层
点那个图标，一整层内容不是淡入、也不是从边上推入，而是从图标所在的那个点像水波一样画出一个圆，圆越来越大直到铺满整屏；再点一下，圆又缩回同一个点。
什么时候用它
全屏菜单、主题切换、从某个按钮展开的详情用它 —— 用户一眼能看出「它是从这里出来的」；如果展开的东西和那个按钮无关，这个联系反而会误导。
参数
transform-origin: centre of the tapped element · radius 0 → hypot(w, h) · 620ms cubic-bezier(.22,1,.36,1) · closes along the same path
配方
原点圆形扩散 → radius 0 → hypot w @ 620ms cubic-bezier(.22,1,.36,1)
给 AI 的一句话
让这层菜单从按钮原点扩散出来：圆心取被点元素的中心坐标，clip-path 用 circle(半径 at 圆心)，半径从 0 补间到能覆盖最远那个角的距离（对角线长度），620ms cubic-bezier(.22,1,.36,1)；关闭时沿同一条路缩回 0。层本身的尺寸全程不变。