这个效果是怎么做出来的
环形占比图（甜甜圈图）的每一段是一个 circle 的描边片段：stroke-dasharray 写成「本段弧长 圆周长减弧长」，再用 stroke-dashoffset 负偏移把每段转到自己的起始角度。入场动画就是依次把每段的可见弧长从 0 过渡到目标值，配合 transition-delay 递增，整环顺时针逐段画出来。
点击外移有一个著名的坑：SVG 元素的 transform 旋转中心默认在画布左上角而不是圆心，直接 translate 会飞到奇怪的地方。必须显式把 transform-origin 钉在圆心坐标（或对每段用 transform-box: fill-box），再沿该段角度的方向 translate 出去 6 到 10px，才是干净的「抽出」。中心文字同步换成该段名称和百分比，其余段轻微变暗。
怎么用这条提示词
适合支出分类、时间构成、渠道占比这类 3 到 6 个部分的构成展示。发给 AI 时给出各段名称、数值和颜色，它会生成弧长换算与偏移逻辑。想让入场更有仪式感，补一句「各段依次延迟 80 毫秒画出，整圈 1 秒画完」。
想效果更好？试试这些
段间留 2 度的背景色缝隙，比实心相接精致得多；最小段别低于 3%，太小看不见也点不中。外移距离固定用 8px，别按比例，小段抽太远像掉出来。中心文字切换时做一次 120 毫秒的透明度交叉淡化，避免数字跳变。图例和环联动：悬停图例项时对应段也外移，两个方向都能触发探索。最后锁死 stroke-linecap 用 butt（平头），round 会让相邻段接缝鼓包。