《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）

5.1 CSS 过渡基础：网页的微妙舞步

当网页元素轻盈地在状态之间跳跃，那一刻，它们不再是静态的代码块，而是充满生命的舞者。CSS过渡赋予了它们这种能力，让它们在变化中展现出流畅的美感。理解CSS过渡的基础，就是学会编排这场精彩的舞蹈。

5.1.1 基础知识

• 过渡属性（Transition Property）：指定哪个CSS属性将应用过渡效果。可以是具体的属性名，或使用 all 应用于所有可过渡的属性。
• 过渡时长（Transition Duration）：定义过渡效果从开始到结束的时间长度，通常以秒（s）或毫秒（ms）为单位。
• 过渡曲线（Transition Timing Function）：控制过渡的速度曲线，例如 linear、ease-in、ease-out 和 ease-in-out。
• 过渡延迟（Transition Delay）：设置过渡效果开始前的延迟时间。

5.1.2 重点案例：按钮悬停效果

设计一个按钮，当鼠标悬停时，背景颜色和文字颜色平滑过渡，提升用户交互体验。

• HTML 结构：

<button class="transition-button">悬停我</button>

• CSS 样式：

.transition-button {
   
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

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

通过设置 transition 属性，我们创建了一个平滑的颜色过渡效果，让按钮在鼠标悬停时更加动感和吸引人。

5.1.3 拓展案例 1：渐变显示导航菜单

假设你的网站有一个隐藏的导航菜单，当用户点击菜单按钮时，希望菜单能够以渐变的方式显示出来。

• HTML 结构：

<nav class="hidden-menu">菜单内容</nav>

• CSS 样式：

.hidden-menu {
   
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hidden-menu.visible {
   
  opacity: 1;
}

通过切换 .hidden-menu 元素的 .visible 类，我们可以实现菜单的渐变显示和隐藏效果。

5.1.4 拓展案例 2：动态调整元素大小

让一个元素在鼠标悬停时动态地改变大小，增加页面的互动性。

• HTML 结构：