当青训营遇上码上掘金。

本文将介绍一个基于HTML、CSS和JavaScript的名片网页代码。该代码使用HTML结构网页内容，CSS样式美化页面外观，JavaScript提供交互功能。

演示

思路

首先，我们使用HTML创建一个名片标题栏和内容区块。标题栏包含名片的标题，而内容区块则包含详细的联系信息。我们通过使用CSS来美化页面，使用id选择器和类选择器定义样式，使用背景色和字体样式来定义页面的主题。

接下来，我们通过添加JavaScript代码来提供交互功能。在本例中，我们通过添加点击事件监听器来实现点击标题栏时隐藏/显示联系信息的功能。该功能实现通过切换页面元素的CSS类来隐藏或显示信息。

通过使用HTML、CSS和JavaScript代码，我们创建了一个简单而强大的名片网页。它可以通过添加和修改样式和功能来适应各种需求。这种技术可用于创建各种网页，从简单的个人博客到复杂的电子商务网站。

代码实现

1.鼠标悬停后头像旋转效果使用CSS3动画。

CSS3的transform属性允许我们在不改变HTML元素的布局的情况下改变元素的形状、大小和方向。通过使用transform，我们可以缩放元素、旋转元素、移动元素和倾斜元素，而不会影响其他元素的布局。

CSS3的transition属性允许我们为元素的样式更改添加动画效果。当元素的样式更改时，动画效果可以提供平滑的过渡，使页面更具交互性和可用性。

#avatar:hover {
  transform: rotate(360deg);
  transition: 1.5s;
}

2.点击卡片标题，联系信息隐藏/消失。

通过display:none属性实现联系信息隐藏效果。

.hidden {
  display: none;
}

toggle是一种允许在两种状态之间切换的函数，通常是开和关。

document.querySelector("#card-header").addEventListener("click", function() {
  document.querySelector("#card-body").classList.toggle("hidden");
});