CSS3 实现鼠标悬停 div 跳动效果

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: translateY(-10px);
}

解释：

.box 是一个宽高为 100px 的红色 div，使用 transition 属性设置了 transform 属性的过渡效果，当 transform 属性发生变化时，会以 0.5 秒的时间进行平滑过渡。当鼠标放到 div 上时，使用 :hover 伪类来控制 transform 属性的变化，使 div 在 Y 轴方向上向上移动 10px，从而实现跳起的效果。