下划线动画标签（Animated Underline Tabs）是什么：效果预览与 AI 设计提示词

效果预览

概览数据团队账单

下划线在标签间平滑滑动

适合用在哪

页面顶部导航、内容分区标签、账户设置页签。

容易踩的坑

字体加载完成前测量宽度，Web 字体替换后指示条与文字错位。
直接动画 left 和 width 会触发布局，标签多时切换明显卡顿。
标签缺少 role=tab 与 aria-selected，读屏用户无法得知当前选中项。

设计提示词 · Prompt

下划线动画标签（Animated Underline Tabs）：标签行底部 1.5px 灰色基线；指示条是一个绝对定位的 2.5px 品牌色圆角条，切换时用 transform:translateX + scaleX（读取目标标签的位置与宽度）平滑滑过去，250-350ms cubic-bezier(.32,.72,0,1)。单个标签内也可以做"从中间向两边展开"的 scaleX 0→1 入场。指示条要测量目标位置（getBoundingClientRect 或 offsetLeft），窗口 resize 时重算。文字颜色同步过渡：当前项深色加粗。

Animated Underline Tabs: A 1.5px gray baseline at the bottom of the tab row; the indicator is an absolutely positioned 2.5px rounded brand-color bar that glides over on switch using transform: translateX + scaleX (reading the target tab's position and width), 250-350ms cubic-bezier(.32,.72,0,1). Individual tabs can also use a "expand from center outward" scaleX 0→1 entrance. The indicator must measure the target position (getBoundingClientRect or offsetLeft) and recalculate on window resize. Text color transitions in sync: the active item is dark and bold.

常见搭配

同一页面里经常和「下划线动画标签」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

标签页Tabs 吸顶模糊导航Sticky Blur Header 筛选标签Filter Chips 缓动曲线体系Easing Curves

演示 HTML 结构

<div class="s d-ultabs">
  <div class="d-ultabs__bar">
    <span class="d-ultabs__tab">概览</span>
    <span class="d-ultabs__tab is-on">数据</span>
    <span class="d-ultabs__tab">团队</span>
    <span class="d-ultabs__tab">账单</span>
  </div>
  <span class="d-tiny">下划线在标签间平滑滑动</span>
</div>