css 点击人员基本信息，展示动画效果，穿针将人员详细信息展示出来

在CSS中，你可以结合HTML和JavaScript来创建这样的交互式效果。当你点击人员的基本信息按钮时，可以应用一些CSS动画，如淡入、滑出或者旋转等，显示详细的个人信息。

首先，在HTML中，给基本信息按钮添加一个`data-info`属性，链接到详细的人员信息部分：

<button class="basic-info" data-info="#person-detail">查看详情</button>
<div id="person-detail" style="display: none;">...</div>

然后，利用CSS伪元素`:hover`或`:active`为鼠标悬停或点击时设置动画效果：

.basic-info {
  /* 添加基本样式 */
  transition: all 0.3s ease;
}

.basic-info:hover,
.basic-info:active {
  /* 当鼠标悬停或点击时，触发动画 */
  transform: scale(1.1); /* 放大按钮 */
  color: blue; /* 变色 */
}

#person-detail {
  display: none; /* 初始隐藏详细信息 */
  animation: slideInFromBottom 0.5s ease forwards; /* 动画名称及持续时间 */
}

@keyframes slideInFromBottom {
  0% {transform: translateY(100%);}
  100% {transform: translateY(0);}
}

当用户点击按钮时，JavaScript事件监听器会控制详细信息的显示：

document.querySelector('.basic-info').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认行为（跳转）
  const target = e.target.dataset.info;
  document.getElementById(target).style.display = 'block'; // 显示详细信息
});

这样，当用户点击“查看详情”按钮时，就会看到一个从底部上来的动画效果，显示出人员的详细信息。