水墨导航
底部毛笔下划线 + 墨迹扩散悬停效果
交互说明
将鼠标悬停在导航菜单上，可以看到：
- 文字颜色由浅墨变浓墨
- 底部墨迹线条由中心向两侧晕开（scaleX 动画）
- 当前激活项（首页）保持浓墨色 + 墨迹线常驻
HTML 结构
<!-- 顶部导航 -->
<nav class="han-navbar" data-han-navbar aria-label="主导航">
<div class="han-navbar__inner">
<a class="han-navbar__brand" href="/">汉<span>设</span></a>
<button class="han-navbar__toggle" type="button"
aria-expanded="false" aria-controls="primary-nav" aria-label="打开导航菜单">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
<ul class="han-navbar__menu" id="primary-nav">
<li class="han-navbar__item han-navbar__item--active">
<a href="/" aria-current="page">首页</a>
</li>
<li class="han-navbar__item"><a href="/works">作品</a></li>
<li class="han-navbar__item"><a href="/craft">技法</a></li>
<li class="han-navbar__item"><a href="/story">故事</a></li>
</ul>
</div>
</nav>使用场景
- 品牌官网顶部导航
- 文章目录、侧边菜单
- 标签页/选项卡导航
- 支持 sticky 粘性定位和毛玻璃背景