这个效果是怎么做出来的
分段占比条是成本最低的高级感：一条 flex 容器，每段宽度是百分比，段间留 2px 细缝（用 border 或 gap 实现），圆角只在整条的两端。点击某一段时给它两步动画——translateY(-6px) 向上抽出加 scale(1.04) 微放大——其余段同时把饱和度压低，视线立刻聚焦。段上方浮出名称和百分比的小气泡，出现用 150 毫秒上浮淡入。
细节决定质感：抽出方向应该垂直于条带本身（如果条带是竖的就往左抽），气泡要在段内居中且不超出屏幕边界；再点一次同一段或点空白处时，整条恢复原状。所有动画只碰 transform 和 opacity，多段同时动也流畅。
怎么用这条提示词
适合预算构成、时间分配、来源占比这类「整体中看部分」的场景，移动端上一条细带比一块饼图省空间得多。发给 AI 时给出各段名称和数值，它会生成 flex 布局与点击逻辑。段很多（超过 8 段）时叮嘱 AI 把小段合并成「其他」，不然细缝比段还宽。
想效果更好？试试这些
段宽小于 5% 时隐藏内部文字，改为抽出到气泡里显示，避免挤成蚂蚁文。配色用同一色相的不同明度加一个对比色强调最大段，比彩虹配色高级。悬停态（桌面端）先做轻微上浮 2px，点击才全量抽出，两级反馈层次更好。整条两端圆角要和段的直角统一处理：用 overflow: hidden 在容器上裁圆角，段本身不用管圆角，简单且不会漏缝。