Show HN: 我看到这个酷炫的导航揭示，于是我做了一个简易的 HTML+CSS 版本

Source: Hacker News

这是一个简单的代码探索，灵感来源于（并且直接抄袭自） ，最初在 X 上看到的这里。

在本例中，我实现了一个菜单，当用户点击按钮时会被揭示，只使用 HTML + CSS（不使用 JavaScript）。

Clip‑paths

1. 揭示圆形 – 菜单通过一个从左上角扩展到右下角的圆形被显示。clip‑path 的计算方式为：

   clip-path: circle(calc(1.42 * 100vmax) at 0 0);

   • 100vmax 使用视口宽度和高度中较大的那个。
   • 乘以 1.42（≈ √2）可确保圆的直径覆盖视口的对角线。

2. 射线多边形 – 多边形 clip‑path 模拟“射线”效果。当前多边形是硬编码的，但可以通过 JavaScript 生成，以便动态适配不同的导航尺寸并保持响应式。

感谢光临。