掌握过渡的使用与缓动效果，实现常见小案例

CSS 过渡是一种强大的动画工具，可以在元素的样式变化过程中添加平滑的过渡效果。结合缓动函数（ease、linear 等），我们可以轻松实现各种动态效果，从而提升用户体验。

1. CSS 过渡的基本语法

过渡的核心属性是 transition，它由以下几个部分组成：

过渡属性：指定需要变化的 CSS 属性，例如 width、background-color 等。
持续时间：过渡效果持续的时间，例如 0.5s。
缓动函数：定义变化的速度曲线，例如 ease、linear、ease-in、ease-out。
延迟时间（可选）：定义过渡效果的延迟时间，例如 1s。

语法格式如下：

transition: <property> <duration> <timing-function> <delay>;

2. 常见缓动函数介绍

linear：匀速过渡。
ease：默认值，缓慢开始，加速中间，缓慢结束。
ease-in：缓慢开始，快速结束。
ease-out：快速开始，缓慢结束。
ease-in-out：缓慢开始和结束，中间加速。
自定义贝塞尔曲线（cubic-bezier）：通过控制点精确定义缓动效果。

3. 案例：背景颜色过渡

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px; /* 盒子的宽度 */
      height: 100px; /* 盒子的高度 */
      background-color: lightblue; /* 初始背景颜色 */
      transition: background-color 0.5s ease; /* 定义背景颜色的过渡效果 */
    }

    .box:hover {
      background-color: lightcoral; /* 鼠标悬停时的背景颜色 */
    }
  </style>
  <title>背景颜色过渡</title>
</head>
<body>
  <div class="box">
    鼠标悬停我试试
  </div>
</body>
</html>

详细解释：

transition: background-color 0.5s ease;：设置背景颜色过渡效果，持续时间为 0.5s，缓动函数为 ease。
当鼠标悬停在盒子上时，背景颜色平滑过渡到 lightcoral。

4. 案例：宽度变化过渡

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px;
      height: 50px;
      background-color: lightgreen;
      transition: width 0.3s ease-in-out; /* 定义宽度的过渡效果 */
    }

    .box:hover {
      width: 300px; /* 鼠标悬停时的宽度 */
    }
  </style>
  <title>宽度变化过渡</title>
</head>
<body>
  <div class="box">
    悬停我，看看长度变化
  </div>
</body>
</html>

详细解释：

transition: width 0.3s ease-in-out;：设置宽度的过渡效果，持续时间为 0.3s，缓动函数为 ease-in-out。
鼠标悬停时，宽度从 200px 平滑过渡到 300px。

5. 案例：多属性过渡

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightyellow;
      border-radius: 0; /* 初始为方形 */
      transition: all 0.5s ease; /* 定义所有属性的过渡 */
    }

    .box:hover {
      width: 150px; /* 改变宽度 */
      height: 150px; /* 改变高度 */
      background-color: orange; /* 改变背景颜色 */
      border-radius: 50%; /* 改变为圆形 */
    }
  </style>
  <title>多属性过渡</title>
</head>
<body>
  <div class="box">
    多属性变化
  </div>
</body>
</html>

详细解释：

transition: all 0.5s ease;：为所有可过渡的属性设置过渡效果。
鼠标悬停时，盒子的宽度、高度、背景颜色和边框圆角同时发生过渡。

6. 案例：按钮点击效果

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .button {
      padding: 10px 20px; /* 按钮的内边距 */
      background-color: royalblue; /* 按钮的背景颜色 */
      color: white; /* 按钮文字颜色 */
      border: none; /* 移除边框 */
      border-radius: 5px; /* 按钮圆角 */
      cursor: pointer; /* 鼠标样式为手型 */
      transition: transform 0.2s ease-in-out; /* 设置缩放效果过渡 */
    }

    .button:active {
      transform: scale(0.95); /* 按下时缩小 */
    }
  </style>
  <title>按钮点击效果</title>
</head>
<body>
  <button class="button">
    点击试试
  </button>
</body>
</html>

详细解释：