v5 底部导航 · 5 种风格

5 个标签固定:首页 · 学院 · 交易 · 工具 · 账户 全部带 SVG 图标 + 当前页高亮 + 交互动画
每个都可以点标签切换试试高亮效果。横着滚动看完全部 5 个。
风格 1
毛玻璃 + 滑动指示条
最稳的一套。半透明模糊背景,顶部一条金色指示条跟着手指滑动,图标轻轻上浮放大。
动画:指示条 0.42s 弹性位移 + 图标上浮 2px
风格 2
悬浮胶囊
底栏做成一颗悬空药丸,两头留白。当前项整个圆形图标弹起来变成金色,文字跟着浮上来。
动画:圆形上浮 14px + 光晕扩散,最跳的一套
风格 3
光晕 + 波纹
深色高科技感。当前项图标外发光,顶部一道金色光带持续流动,点击处会荡开一圈波纹。
动画:点击波纹 + 光带 4.5s 循环 + 图标发光
风格 4
iOS 极简(线框→实心)
最克制的做法。平时是线框图标,当前项变成实心金色并轻微上移,其余什么都不加。
动画:线框填充 0.26s + 上移 3px,最干净
风格 5
霓虹扫描(科技感)
赛博味最重的一套。背景有网格底纹,当前项图标有扫描线反复扫过,底部一道能量条亮起。
动画:扫描线 2.1s 循环 + 霓虹发光 + 能量条弹出