团队成员卡片（悬停社交链接 + 简介弹窗 CSS 源码）

效果演示（真实可交互）

下方为 3 张团队成员卡片：悬停时卡片上浮、头像放大旋转、三个社交链接从底部依次浮现（带 0.05s 级联延迟）；点击”查看简介”会弹出带缩放动画的详情弹窗，点击遮罩或关闭按钮可退出。

完整代码

HTML 结构：每张卡片包含头像、姓名、职位、两行截断的个人简介、社交链接组（默认隐藏）与”查看简介”按钮：

<div class="tm-card">
  <div class="tm-avatar av1">粤</div>
  <h3 class="tm-name">粤喵</h3>
  <p class="tm-role">创始人 · 前端架构师</p>
  <p class="tm-bio">专注 CSS 动效 8 年，组件站发起人。</p>
  <div class="tm-socials">
    <a class="tm-soc">GH</a><a class="tm-soc">掘</a><a class="tm-soc">微</a>
  </div>
  <button class="tm-more">查看简介</button>
</div>

核心 CSS：社交链接默认透明 + 下移，卡片悬停时依次浮现；简介弹窗用 fixed 遮罩 + 缩放动画：

.tm-soc { opacity: 0; transform: translateY(8px); transition: all .25s ease; }
.tm-card:hover .tm-soc { opacity: 1; transform: translateY(0); }
.tm-card:hover .tm-soc:nth-child(2) { transition-delay: .05s; }
.tm-card:hover .tm-soc:nth-child(3) { transition-delay: .1s; }

.tm-modal { position: fixed; inset: 0; backdrop-filter: blur(4px); }
.tm-modal-box { animation: tm-pop .3s cubic-bezier(.22, .8, .3, 1); }
@keyframes tm-pop { from { transform: scale(.9); opacity: 0; } }

原生 JS 弹窗逻辑（无第三方库）：

card.querySelector('.tm-more').addEventListener('click', () => {
  modalName.textContent = card.querySelector('.tm-name').textContent;
  modalRole.textContent = card.querySelector('.tm-role').textContent;
  modalBio.textContent = card.querySelector('.tm-bio').textContent;
  modal.hidden = false;
  document.body.style.overflow = 'hidden';   // 锁定背景滚动
});
modal.addEventListener('click', e => { if (e.target === modal) close(); });

参数说明

兼容性与性能

• 社交链接悬停只操作 opacity/transform，合成层动画，性能开销极低
• 弹窗用 [hidden] 属性控制显隐，关闭后不残留监听器与视觉干扰
• -webkit-line-clamp 需 WebKit 内核（Chrome/Safari/Edge），Firefox 63+ 也支持，老版本会退化为全文显示
• 弹窗打开时锁定 body 滚动，避免背景穿透滚动，关闭时恢复

常见问题

Q: 成员人数很多，卡片会很多行吗？ 网格使用 auto-fit + minmax(200px, 1fr) 自动换行，成员增减无需调整布局，横向空间足够时自动排多列。

Q: 社交链接可以放真实图标吗？ 可以，把文字简写替换为 SVG 图标即可，悬停浮现与级联动画逻辑不变。

Q: 弹窗内容想更丰富（作品集、技能条）？ 在 .tm-modal-box 内追加区块，数据来源可改为从 data-* 属性或 JS 对象读取，弹窗骨架无需改动。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换成员信息与头像即可用于团队页。