请帮我写一个介绍人物的网页要求有：互动要有动效要介绍这几个：人物性别 人物名称 人物QQ号 人物邮箱要用到你学习的ui知识

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  padding: 20px;
  margin: 0 auto;
}
<p>.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
}</p>
<p>.button:hover {
background-color: #45a049;
}</p>
<p>@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}</p>
<p>.fade-in {
animation: fadeIn 1s ease-in-out;
}</p>
<p>@keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}</p>
<p>.slide-in {
animation: slideIn 1s ease-in-out;
}
</style></p>
</head>
<body>
<div class="container">
  <h2 class="fade-in">人物介绍</h2>
  <div class="fade-in">
    <p>性别: 男</p>
    <p>姓名: 张三</p>
    <p>QQ号: 123456789</p>
    <p>邮箱: zhangsan@example.com</p>
  </div>
  <button class="button slide-in">联系他</button>
</div>
<script>
  document.querySelector(".button").addEventListener("click", function() {
    alert("请给张三发送邮件或添加QQ好友进行联系！");
  });
</script>
</body>
</html

请帮我写一个介绍人物的网页要求有：互动要有动效要介绍这几个：人物性别 人物名称 人物QQ号 人物邮箱要用到你学习的ui知识

请帮我写一个介绍人物的网页要求有：互动要有动效要介绍这几个：人物性别人物名称人物QQ号人物邮箱要用到你学习的ui知识