17370845950

:hover 与 transition 结合可实现平滑的交互效果，如颜色渐变、缩放、阴影变化等；通过设置 transition 控制背景色、透明度、变换等属性的过渡时间与缓动函数，提升用户体验；推荐使用 transform 和 opacity 以避免重排，确保性能流畅，并注意在移动端保持功能可用性。

当鼠标悬停在元素上时，CSS 伪类 :hover 能够触发样式变化，而结合 transition 属性后，这些变化可以变得平滑自然，形成简单的动画效果。这种组合无需 JavaScript，就能提升界面的交互体验。

基本用法：实现颜色渐变

最常见的是让按钮或链接在鼠标移入时改变背景色，并通过 transition 实现颜色过渡。

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

这里设置了 transition 作用于 background-color，持续 0.3 秒，使用 ease 缓动函数。鼠标移上去时颜色会平滑变深。

扩展动画属性

transition 不只限于颜色，还可以用于尺寸、位置、阴影等可插值属性。

• transform：缩放、旋转
• opacity：透明度变化
• box-shadow：阴影增强
• width/height：宽高变化

.card {
  width: 200px;
  opacity: 0.8;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
  transform: scale(1.1);
  opacity: 1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

使用 all 表示多个属性同时过渡，cubic-bezier 可自定义动画曲线，使效果更生动。

注意性能与用户体验

虽然 hover + transition 简单有效，但需注意以下几点：

• 避免对 height、width、margin、padding 频繁变化做过渡，可能引起重排（reflow），影响性能
• 优先使用 transform 和 opacity，它们由 GPU 加速，更流畅
• 设置合理的过渡时间，一般 0.1s～0.4s 之间，太长会让人感觉迟钝
• 考虑移动端无“悬停”概念，确保功能在不支持 hover 的设备上仍可用