css伪类:hover与transition结合制作动画

P粉602998670 2025-10-17 00:00:00 次阅读

使用 :hover 与 transition 结合可实现平滑悬停动画。通过设置默认样式、定义 :hover 状态及过渡属性，如 transform、颜色或位移，配合 ease 缓动效果，提升交互体验。优先使用 transform 和 opacity 以优化性能，避免频繁重排，合理配置过渡时间与贝塞尔曲线，实现流畅自然的 CSS 动画效果。

使用 :hover 伪类与 transition 属性结合，可以轻松实现平滑的鼠标悬停动画效果。这种方式无需 JavaScript，仅通过 CSS 即可增强用户交互体验。

基本原理

:hover 用于定义元素在鼠标悬停时的样式状态，而 transition 控制样式变化过程中的过渡效果，比如持续时间、缓动方式等。当两者结合时，元素在进入和离开 hover 状态时会自动产生动画。

关键点：

设置元素默认样式
在 :hover 中定义目标样式
使用 transition 指定哪些属性需要动画以及动画参数

常见用法示例

以下是一些实用且常见的动画效果实现方式：

/* 缩放效果 */
.card {
  width: 200px;
  height: 200px;
  background: #007bff;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.1);
}
/ 颜色渐变 /
.button {
background-color: #fff;
border: 2px solid #007bff;
color: #007bff;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.button:hover {
background-color: #007bff;
color: #fff;
}
/ 位移动画 /
.box {
width: 100px;
height: 100px;
background: red;
transition: left 0.5s;
position: relative;
}
.box:hover {
left: 50px;
}