17370845950

:hover 伪类结合 transition 可实现平滑的悬停动画效果，提升交互体验。例如按钮背景色渐变、图片缩放等，通过设置 transition-property、duration、timing-function 等属性控制过渡效果，常用场景包括按钮、图片、导航菜单的动态反馈，合理使用可增强界面生动性，但应避免过度动画影响性能。

当用户将鼠标悬停在元素上时，:hover 伪类会触发样式变化。结合 transition 属性，可以让这种样式变化变得平滑、有动画效果，而不是瞬间完成，从而提升用户体验。

基本用法

给一个元素设置初始样式，并在 :hover 中定义悬停时的状态，再通过 transition 控制过渡效果。

例如：

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

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

鼠标移上时，背景色会在 0.3 秒内平滑变深。

transition 的常用属性

transition 可以细化控制过渡的各个方面：

• transition-property：指定要过渡的 CSS 属性，如 background-color、transform、opacity
• transition-duration：过渡持续时间，如 0.3s、500ms
• transition-timing-function：速度曲线，如 ease、linear、ease-in-out
• transition-delay：延迟多久开始动画

简写示例：

transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

常见应用场景

这种组合广泛用于增强交互反馈：

• 按钮颜色/阴影渐变
• 图片缩放或滤镜变化（如加灰、变亮）
• 导航菜单项的下划线滑入
• 文字颜色缓慢改变

图片悬停放大示例：

.image {
  width: 100px;
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.1);
}
  

基本上就这些。合理使用 :hover 和 transition 能让界面更生动，但注意不要过度动画影响性能或分散注意力。