环形社交分享菜单 · 在线演示

演示了什么：它让你亲眼看到一个中心按钮如何展开成环形分享菜单：每个入口从中心弹出、保持图标朝上，并能点击得到反馈。这个版本去掉外部图标库，用文字缩写替代，适合在 iframe 中离线运行。\n\n关键实现：\n\n1. css 里的 .menu.active .items li 用“旋转 + translateX + 反向旋转”定位，省掉手写坐标，数量固定时最直观。\n2. css 的 transition-delay:calc(.04s * var(--i)) 让按钮按序弹出，延迟写在每个 li 的变量上，便于调节节奏。\n3. js 里的 setOpen(open,message) 同步 class、aria-expanded 和提示文本，避免视觉状态与可访问状态不一致。\n\n动手改一改：\n\n1. 改 css 的 --r 半径，预期圆点离中心更近或更远，观察小屏是否仍放得下。\n2. 把 45deg 改成 60deg，预期按钮不再均匀闭合，体会角度与数量的关系。