css伪类:hover与transition结合动画_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css伪类:hover与transition结合动画

2025-10-25

浏览次数：次

返回列表

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

css伪类:hover与transition结合动画

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

基本用法：实现颜色渐变

最常见的是让按钮或链接在鼠标移入时改变背景色，并通过 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 不只限于颜色，还可以用于尺寸、位置、阴影等可插值属性。

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

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);
}