个人名片卡片设计（头像/数据统计/社交按钮 CSS 源码）

效果演示（真实可交互）

下方两张个人名片卡片：一张亮色渐变封面、一张暗色风格。悬停时整卡上浮、头像轻微放大旋转，统计数字与按钮形成完整的信息层级。

完整代码

HTML 结构：封面、头像、姓名、职业、简介、统计、操作按钮依次排列：

<div class="pf-card">
  <div class="pf-cover"></div>
  <div class="pf-body">
    <div class="pf-avatar">喵</div>
    <h3 class="pf-name">粤喵 Yuemiu</h3>
    <p class="pf-role">前端工程师 · 开源爱好者</p>
    <p class="pf-bio">专注 CSS 动效与交互体验，分享可直接复用的组件源码。</p>
    <div class="pf-stats">
      <div class="pf-stat"><strong>128</strong><span>组件</span></div>
      <div class="pf-stat"><strong>36k</strong><span>Stars</span></div>
      <div class="pf-stat"><strong>2.4k</strong><span>粉丝</span></div>
    </div>
    <div class="pf-actions">
      <a href="#" class="pf-btn primary">关注</a>
      <a href="#" class="pf-btn ghost">私信</a>
    </div>
  </div>
</div>

核心 CSS：

.pf-card {
  width: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: #1c2029;
  border: 1px solid #2a2f3a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pf-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(108, 140, 255, .25);
}
.pf-cover { height: 84px; background: linear-gradient(135deg, #6c8cff, #b388ff); }
/* 头像压住封面下沿，形成负 margin 叠层 */
.pf-avatar {
  width: 72px; height: 72px;
  margin: -36px auto 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c8cff, #b388ff);
  border: 4px solid #1c2029;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.pf-card:hover .pf-avatar { transform: scale(1.08) rotate(-4deg); }
.pf-stats {
  display: flex; justify-content: space-around;
  border-top: 1px solid #2a2f3a;
  padding: 14px 0 16px;
}
.pf-actions { display: flex; gap: 10px; }
.pf-btn { flex: 1; text-align: center; padding: 10px 0; border-radius: 8px; text-decoration: none; }

参数说明

兼容性与性能

• 纯 CSS 实现，兼容所有现代浏览器，无依赖库
• 负 margin 叠层技巧让头像”压”在封面下沿，是最常见也最稳定的名片布局方式
• 动画仅用 transform 与 box-shadow，性能良好
• 移动端宽度不足时，flex-wrap 保证两张卡片自动换行，不会横向溢出

常见问题

Q: 头像想换成真实图片怎么办？ 把 .pf-avatar 的文本换成 <img>，设置 width/height: 100%; object-fit: cover; border-radius: 50%，背景色可去掉。

Q: 统计数字想做成滚动动画？ 可配合粤喵组件站的滚动触发数字计数组件，用 IntersectionObserver 在卡片进入视口时累加数字。

Q: 名片太多会不会性能差？ 每张卡片只有 transform 动画，数量在几十张内无压力；数量巨大时建议列表懒加载。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。