为上方的html代码设计一个响应式框架当鼠标悬停在盒子上时图标视觉效果靠近并且文字变色

以下是一个基本的响应式框架，可以实现当鼠标悬停在盒子上时，图标视觉效果靠近，并且文字变色的效果。

HTML代码：

<div class="box">
  <i class="fa fa-user"></i>
  <h3>John Doe</h3>
  <p>Web Developer</p>
</div>

CSS代码：

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.box:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.box i {
  font-size: 60px;
  color: #333;
  transition: all 0.3s ease;
}

.box:hover i {
  color: #ff6600;
  transform: translateY(-20px);
}

.box h3 {
  margin: 10px 0;
  font-size: 24px;
  color: #333;
  transition: all 0.3s ease;
}

.box:hover h3 {
  color: #ff6600;
}

.box p {
  font-size: 18px;
  color: #333;
  transition: all 0.3s ease;
}

.box:hover p {
  color: #ff6600;
}

解释：

1. .box：设置盒子的基本样式，包括宽度、高度、背景色、边框圆角等。

2. display: flex;：使用Flexbox布局，让盒子内的元素垂直居中。

3. transition: all 0.3s ease;：设置过渡效果，让盒子在鼠标悬停时有一个平滑的过渡动画。

4. .box:hover：设置当鼠标悬停在盒子上时的样式，包括缩放、阴影等效果。

5. .box i：设置图标的样式，包括大小、颜色等。

6. .box:hover i：设置当鼠标悬停在盒子上时图标的样式，包括颜色和位置的变化。

7. .box h3：设置标题的样式，包括大小、颜色等。

8. .box:hover h3：设置当鼠标悬停在盒子上时标题的样式，包括颜色的变化。

9. .box p：设置文本的样式，包括大小、颜色等。

10. .box:hover p：设置当鼠标悬停在盒子上时文本的样式，包括颜色的变化