CSS 过渡效果（CSS Transitions）

核心知识点讲解

CSS 过渡效果是 CSS3 中引入的一项功能，它允许你在元素的状态变化时（如悬停、点击等）添加平滑的动画效果，而无需使用 JavaScript。CSS 过渡效果比 CSS 动画更简单，适合处理交互反馈等场景。

基本概念

过渡属性（Transition Property）：指定要应用过渡效果的 CSS 属性
过渡持续时间（Transition Duration）：指定过渡效果完成所需的时间
过渡时间函数（Transition Timing Function）：指定过渡效果的速度曲线
过渡延迟（Transition Delay）：指定过渡效果开始前的等待时间
过渡触发事件：导致元素状态变化的事件，如 :hover、:focus、:active 等

过渡属性

1. transition-property

指定要应用过渡效果的 CSS 属性：

.element {
  transition-property: width; /* 仅对 width 属性应用过渡 */
  /* 或 */
  transition-property: width, height; /* 对多个属性应用过渡 */
  /* 或 */
  transition-property: all; /* 对所有可过渡属性应用过渡 */
}

2. transition-duration

指定过渡效果完成所需的时间：

.element {
  transition-duration: 1s; /* 1秒 */
  /* 或 */
  transition-duration: 0.5s, 1s; /* 对不同属性应用不同的持续时间 */
}

3. transition-timing-function

指定过渡效果的速度曲线：

.element {
  transition-timing-function: ease; /* 默认值，缓入缓出 */
  /* 或 */
  transition-timing-function: linear; /* 匀速 */
  /* 或 */
  transition-timing-function: ease-in; /* 缓入 */
  /* 或 */
  transition-timing-function: ease-out; /* 缓出 */
  /* 或 */
  transition-timing-function: ease-in-out; /* 缓入缓出 */
  /* 或 */
  transition-timing-function: cubic-bezier(n, n, n, n); /* 自定义贝塞尔曲线 */
  /* 或 */
  transition-timing-function: steps(n); /* 步进函数 */
}

4. transition-delay

指定过渡效果开始前的等待时间：

.element {
  transition-delay: 0s; /* 默认值，无延迟 */
  /* 或 */
  transition-delay: 0.5s; /* 0.5秒延迟 */
  /* 或 */
  transition-delay: 0.5s, 1s; /* 对不同属性应用不同的延迟 */
}

5. transition

所有过渡属性的简写：

.element {
  transition: property duration timing-function delay;
  /* 例如 */
  transition: width 1s ease 0s;
  /* 或对多个属性应用不同的过渡 */
  transition: width 1s ease 0s, height 0.5s linear 0.5s;
}

可过渡的属性

大多数 CSS 属性都可以应用过渡效果，包括但不限于：

尺寸相关：width、height、padding、margin 等
颜色相关：color、background-color、border-color 等
变换相关：transform（包括 translate、rotate、scale 等）
边框相关：border-radius、border-width 等
背景相关：background-position、background-size 等
字体相关：font-size、line-height 等
透明度相关：opacity

过渡触发方式

过渡效果可以通过以下方式触发：

伪类：:hover、:focus、:active、:checked 等
JavaScript：通过 JavaScript 改变元素的样式
媒体查询：当屏幕尺寸变化时
其他状态变化：如表单元素的状态变化

实用案例分析

案例一：悬停效果

创建一个简单的悬停效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>悬停效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 1.2rem;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .box:hover {
      width: 250px;
      height: 250px;
      background-color: #e74c3c;
      transform: rotate(5deg);
    }

    .container {
      display: flex;
      gap: 30px;
      margin-top: 30px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      background-color: #3498db;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn:hover {
      background-color: #2980b9;
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <h1>悬停效果示例</h1>
  <div class="box">悬停我</div>
  <div class="container">
    <button class="btn">按钮 1</button>
    <button class="btn">按钮 2</button>
    <button class="btn">按钮 3</button>
  </div>
</body>
</html>

案例二：导航菜单效果

创建一个带有过渡效果的导航菜单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航菜单效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    header {
      background-color: #3498db;
      padding: 1rem 0;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 2rem;
      position: relative;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
      padding: 0.5rem 0;
      display: block;
      position: relative;
    }

    nav ul li a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: white;
      transition: width 0.3s ease;
    }

    nav ul li a:hover::after {
      width: 100%;
    }

    nav ul li .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #3498db;
      min-width: 150px;
      padding: 0.5rem 0;
      border-radius: 0 0 4px 4px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
    }

    nav ul li:hover .submenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    nav ul li .submenu li {
      margin-right: 0;
    }

    nav ul li .submenu li a {
      padding: 0.5rem 1rem;
    }

    nav ul li .submenu li a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li>
            <a href="#">关于我们</a>
            <ul class="submenu">
              <li><a href="#">公司简介</a></li>
              <li><a href="#">团队成员</a></li>
              <li><a href="#">发展历程</a></li>
            </ul>
          </li>
          <li>
            <a href="#">服务</a>
            <ul class="submenu">
              <li><a href="#">Web 开发</a></li>
              <li><a href="#">移动应用开发</a></li>
              <li><a href="#">UI/UX 设计</a></li>
            </ul>
          </li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main class="container">
    <h1>导航菜单效果示例</h1>
    <p>本示例展示了如何使用 CSS 过渡效果创建带有悬停下划线和下拉菜单的导航菜单。</p>
    <p>当鼠标悬停在导航链接上时，链接下方会出现一条逐渐展开的下划线；当鼠标悬停在带有子菜单的链接上时，子菜单会平滑地显示出来。</p>
  </main>
</body>
</html>

案例三：卡片悬停效果

创建一个带有悬停效果的卡片：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片悬停效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f4f4f4;
    }

    .container {
      display: flex;
      gap: 30px;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 300px;
      transition: all 0.3s ease;
    }

    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .card-img {
      width: 100%;
      height: 200px;
      background-color: #3498db;
      position: relative;
      overflow: hidden;
    }

    .card-img::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .card:hover .card-img::after {
      opacity: 1;
    }

    .card-content {
      padding: 20px;
    }

    .card-title {
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: #333;
      transition: color 0.3s ease;
    }

    .card:hover .card-title {
      color: #3498db;
    }

    .card-text {
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .card-btn {
      display: inline-block;
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      font-size: 0.9rem;
      transition: all 0.3s ease;
    }

    .card-btn:hover {
      background-color: #2980b9;
      transform: translateX(5px);
    }
  </style>
</head>
<body>
  <h1 style="text-align: center; margin-bottom: 30px;">卡片悬停效果示例</h1>
  <div class="container">
    <div class="card">
      <div class="card-img"></div>
      <div class="card-content">
        <h3 class="card-title">卡片 1</h3>
        <p class="card-text">这是一张带有悬停效果的卡片。当鼠标悬停在卡片上时，卡片会向上移动并显示阴影效果。</p>
        <a href="#" class="card-btn">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img"></div>
      <div class="card-content">
        <h3 class="card-title">卡片 2</h3>
        <p class="card-text">卡片图片会在悬停时变暗，标题会改变颜色，按钮会向右移动。</p>
        <a href="#" class="card-btn">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img"></div>
      <div class="card-content">
        <h3 class="card-title">卡片 3</h3>
        <p class="card-text">所有这些效果都是通过 CSS 过渡实现的，无需使用 JavaScript。</p>
        <a href="#" class="card-btn">了解更多</a>
      </div>
    </div>
  </div>
</body>
</html>

案例四：表单输入效果

创建一个带有过渡效果的表单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单输入效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .form-container {
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 500px;
    }

    h1 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }

    .form-group {
      margin-bottom: 20px;
      position: relative;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      color: #666;
      font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 2px solid #ddd;
      border-radius: 4px;
      font-size: 1rem;
      transition: all 0.3s ease;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }

    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }

    .form-group .error {
      color: #e74c3c;
      font-size: 0.8rem;
      margin-top: 5px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .form-group.has-error input,
    .form-group.has-error textarea {
      border-color: #e74c3c;
    }

    .form-group.has-error .error {
      opacity: 1;
      visibility: visible;
    }

    .btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 4px;
      background-color: #3498db;
      color: white;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h1>联系表单</h1>
    <form>
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" name="name">
        <div class="error">请输入您的姓名</div>
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" name="email">
        <div class="error">请输入有效的邮箱地址</div>
      </div>
      <div class="form-group">
        <label for="message">留言</label>
        <textarea id="message" name="message"></textarea>
        <div class="error">请输入您的留言</div>
      </div>
      <button type="submit" class="btn">提交</button>
    </form>
  </div>
  <script>
    const form = document.querySelector('form');
    const formGroups = document.querySelectorAll('.form-group');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      let isValid = true;

      formGroups.forEach(group => {
        const input = group.querySelector('input, textarea');
        const error = group.querySelector('.error');

        if (!input.value.trim()) {
          group.classList.add('has-error');
          isValid = false;
        } else {
          group.classList.remove('has-error');
        }
      });

      if (isValid) {
        alert('表单提交成功！');
        form.reset();
      }
    });

    formGroups.forEach(group => {
      const input = group.querySelector('input, textarea');
      const error = group.querySelector('.error');

      input.addEventListener('input', () => {
        if (input.value.trim()) {
          group.classList.remove('has-error');
        }
      });
    });
  </script>
</body>
</html>

总结

CSS 过渡效果是一种简单而强大的技术，它具有以下优势：

简单易用：语法简单直观，易于学习和实现
性能良好：由浏览器的渲染引擎处理，性能优于 JavaScript 动画
响应式：可以与媒体查询结合使用，创建响应式动画效果
无需 JavaScript：大多数过渡效果可以仅使用 CSS 实现
丰富的控制选项：提供了多种属性来控制过渡的各个方面

CSS 过渡效果的应用场景非常广泛，包括：

悬停效果和交互反馈
导航菜单和下拉菜单
卡片和产品展示
表单验证和输入反馈
页面滚动效果
模态框和弹出层

通过掌握 CSS 过渡效果，你可以为网页添加平滑、专业的动画效果，提高用户体验和网站的视觉吸引力，而无需编写复杂的 JavaScript 代码。