css伪类:hover与transition结合动画-css教程-PHP中文网

css伪类:hover与transition结合动画

P粉602998670

发布： 2025-10-25 20:10:01

原创

223人浏览过

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

css伪类:hover与transition结合动画

当鼠标悬停在元素上时，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 不只限于颜色，还可以用于尺寸、位置、阴影等可插值属性。

立即学习“前端免费学习笔记（深入）”；

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

查看详情

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 可自定义动画曲线，使效果更生动。