过渡效果（transition，让样式变化更流畅）

20.1 过渡属性

核心过渡属性

属性	描述	示例值
transition-property	指定要过渡的CSS属性	width, height, color, opacity
transition-duration	过渡的持续时间	0.5s, 1000ms
transition-timing-function	过渡的速度曲线	ease, linear, ease-in, ease-out, ease-in-out
transition-delay	过渡开始前的延迟时间	0s, 0.2s

语法

css

元素 {
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0.1s;
}

20.2 过渡简写

语法

css

元素 {
  transition: 属性 持续时间 速度曲线 延迟时间;
}

示例

css

/* 简写形式 */
.element {
  transition: all 0.3s ease 0s;
}

/* 等价于 */
.element {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

多个属性的过渡

css

/* 多个属性的过渡 */
.element {
  transition: 
    width 0.3s ease,
    height 0.5s ease-in,
    background-color 0.3s ease-out;
}

20.3 常用过渡场景

鼠标悬浮效果

css

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

按钮点击效果

css

.button {
  transform: scale(1);
  transition: transform 0.2s ease;
}

.button:active {
  transform: scale(0.95);
}

元素显示隐藏

css

.modal {
  opacity: 0;
  visibility: hidden;
  transition: 
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

20.4 新手避坑

过渡只作用于“可变化的属性”

可过渡的属性：

颜色相关：color, background-color, border-color
尺寸相关：width, height, padding, margin
位置相关：transform (translate, scale, rotate)
透明度：opacity
边框：border-radius, box-shadow

不可过渡的属性：

display (block/inline/none)
visibility (visible/hidden)
position (static/relative/absolute)

注意事项

初始状态：确保元素有初始值
最终状态：确保元素有明确的最终值
性能：避免过渡太多属性，优先使用 transform 和 opacity

20.5 实战：制作悬浮变色按钮、平滑缩放元素

实战目标

创建带有过渡效果的按钮和元素。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS过渡效果实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS过渡效果实战</h1>
    
    <!-- 悬浮变色按钮 -->
    <section class="demo-section">
      <h2>悬浮变色按钮</h2>
      <button class="color-btn">悬停变色</button>
      <button class="border-btn">边框变化</button>
      <button class="shadow-btn">阴影变化</button>
    </section>
    
    <!-- 平滑缩放元素 -->
    <section class="demo-section">
      <h2>平滑缩放元素</h2>
      <div class="scale-container">
        <div class="scale-item">缩放效果</div>
        <div class="rotate-item">旋转效果</div>
        <div class="translate-item">位移效果</div>
      </div>
    </section>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

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

.demo-section {
  margin-bottom: 40px;
  padding: 30px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
  color: #555;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

/* 悬浮变色按钮 */
.color-btn, .border-btn, .shadow-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
  transition: all 0.3s ease;
}

.color-btn {
  background-color: #3498db;
}

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

.border-btn {
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}

.border-btn:hover {
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

.shadow-btn {
  background-color: #e74c3c;
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

.shadow-btn:hover {
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.4);
  transform: translateY(-2px);
}

/* 平滑缩放元素 */
.scale-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.scale-item, .rotate-item, .translate-item {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.scale-item:hover {
  transform: scale(1.1);
  background-color: #2980b9;
}

.rotate-item:hover {
  transform: rotate(15deg);
  background-color: #e74c3c;
}

.translate-item:hover {
  transform: translate(10px, -10px);
  background-color: #2ecc71;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

悬浮变色按钮：不同样式的按钮，悬停时会有颜色、边框或阴影的平滑过渡
平滑缩放元素：三个元素，悬停时分别会有缩放、旋转和位移效果

过渡效果（transition，让样式变化更流畅） ​

20.1 过渡属性 ​

核心过渡属性 ​

语法 ​

20.2 过渡简写 ​

语法 ​

示例 ​

多个属性的过渡 ​

20.3 常用过渡场景 ​

鼠标悬浮效果 ​

按钮点击效果 ​

元素显示隐藏 ​

20.4 新手避坑 ​

过渡只作用于“可变化的属性” ​

注意事项 ​

20.5 实战：制作悬浮变色按钮、平滑缩放元素 ​

实战目标 ​

实战步骤 ​

预期效果 ​

过渡效果（transition，让样式变化更流畅）

20.1 过渡属性

核心过渡属性

语法

20.2 过渡简写

语法

示例

多个属性的过渡

20.3 常用过渡场景

鼠标悬浮效果

按钮点击效果

元素显示隐藏

20.4 新手避坑

过渡只作用于“可变化的属性”

注意事项

20.5 实战：制作悬浮变色按钮、平滑缩放元素

实战目标

实战步骤

预期效果