Avatar Stack
Avatars overlap in a row — instant 'lots of people here' signal
Live preview (drag the parameters, watch it change)
Code
<div class="stack"><span class="a" style="background:#3c3a34">妞</span><span class="a" style="background:#6d6b64">K</span><span class="a more">+9</span></div>
<style>
.stack { display: flex; }
.a { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; margin-left: -12px;
display: grid; place-items: center; color: #fff; font-weight: 700; transition: transform .25s; }
.a:first-child { margin-left: 0; }
.a:hover { transform: translateY(-6px); }
</style><div class="flex"><span class="-ml-3 grid h-11 w-11 place-items-center rounded-full border-[3px] border-white bg-[#3c3a34] font-bold text-white first:ml-0 transition-transform hover:-translate-y-1.5">妞</span>…</div>export function AvatarStack({ users }) {
return (<div style={{ display: "flex" }}>
{users.map((u, i) => (<span key={i} style={{ width: 44, height: 44, borderRadius: "50%", border: "3px solid #fff", marginLeft: i ? -12 : 0, display: "grid", placeItems: "center", background: u.color, color: "#fff", fontWeight: 700 }}>{u.initial}</span>))}
</div>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
每个头像负 margin 向左压住前一个，再用一圈与背景同色的描边把重叠处「切」开。最后一个位置留给「+N」计数。悬停时让单个头像上浮，能顺手解决「压在一起看不清」的问题。头像记得给 alt 或 aria-label，别让屏幕阅读器只读出一堆图片。
How it works (English)
Each avatar uses a negative left margin to tuck under the previous one, and a border in the background color 'cuts' the overlap cleanly. The last slot is a '+N' count. Lifting an avatar on hover helps when faces get crowded. Give avatars alt text or aria-labels so screen readers don't just announce a pile of images.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。