第十四天：过渡与变换 — 让页面"活"起来

蜗牛往上爬 · 前端工业可视化学习笔记第 14 篇
上一篇学了定位，元素可以放到任意位置——但变化是"瞬间"的。今天学 transition（过渡）和 transform（变换），让元素的变化"平滑进行"：悬停上浮、放大、旋转、变色……这些动效是让页面从"能用"到"精致"的关键一步。

一、transition：让变化"平滑"
二、缓动函数：ease / linear / ease-in / ease-out
三、transform：位移、旋转、缩放、倾斜
四、transition + transform 组合
五、动手练：设备卡片悬停动效
六、常见坑点与最佳实践
七、这些知识在工业可视化里用在哪？
八、自测挑战 10 题
九、总结

一、transition：让变化"平滑"

没有 transition，hover 时颜色瞬间变化；有 transition，颜色渐变过渡。

/* 没有过渡：瞬间变化 */
.box { background: blue; }
.box:hover { background: red; }

/* 有过渡：0.3 秒渐变 */
.box {
  background: blue;
  transition: background 0.3s ease;
}
.box:hover { background: red; }

四个子属性

.box {
  /* 哪些属性变化时要有动画 */
  transition-property: background, transform;

  /* 变化持续多久 */
  transition-duration: 0.3s;

  /* 速度曲线 */
  transition-timing-function: ease;

  /* 等多久再开始 */
  transition-delay: 0s;

  /* 简写（推荐） */
  transition: background 0.3s ease, transform 0.3s ease;
}

二、缓动函数：ease / linear / ease-in / ease-out

值	速度曲线	感觉	场景
`ease`	慢→快→慢	自然	通用（默认）
`linear`	匀速	机械	进度条、旋转
`ease-in`	慢→快	加速	元素消失
`ease-out`	快→慢	减速	元素出现
`ease-in-out`	慢→快→慢	平滑	循环动画

/* 最常用：通用过渡 */
.card { transition: transform 0.3s ease; }

/* 出现效果：快→慢 */
.modal { transition: opacity 0.2s ease-out; }

/* 进度条：匀速 */
.progress { transition: width 0.5s linear; }

三、transform：位移、旋转、缩放、倾斜

.box {
  /* 位移 */
  transform: translate(20px, 10px);       /* 水平 20px，垂直 10px */
  transform: translateX(20px);            /* 仅水平 */
  transform: translateY(-10px);           /* 仅垂直（负值向上） */

  /* 旋转 */
  transform: rotate(45deg);               /* 顺时针 45° */

  /* 缩放 */
  transform: scale(1.2);                  /* 放大到 1.2 倍 */
  transform: scale(1.2, 0.8);             /* 水平 1.2 倍，垂直 0.8 倍 */

  /* 倾斜 */
  transform: skew(10deg);                 /* 水平倾斜 10° */

  /* 组合：空格分隔 */
  transform: translate(-50%, -50%) rotate(45deg) scale(1.2);

  /* 变换原点 */
  transform-origin: center center;        /* 默认 */
  transform-origin: top left;             /* 左上角 */
}

为什么用 transform 而不是 top/left？

/* ❌ 用 top/left 做动画：触发重排，性能差 */
.box { top: 10px; }

/* ✅ 用 transform 做动画：只触发合成，性能好 */
.box { transform: translateY(10px); }

🧠 transform 只触发浏览器的"合成"阶段，不触发重排和重绘，性能远好于 top/left/width/height。做动画时优先用 transform 和 opacity。

四、transition + transform 组合

这是 CSS 动效中最常用的组合——hover 触发，transform 做变化，transition 平滑过渡。

/* 卡片悬停上浮 */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* 按钮悬停放大 */
.btn {
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn:hover {
  transform: scale(1.05);
  background: #2a5a8c;
}

/* 图标悬停旋转 */
.icon {
  transition: transform 0.3s ease;
}
.icon:hover {
  transform: rotate(180deg);
}

五、动手练：设备卡片悬停动效

给设备卡片加上悬停上浮 + 数字变色 + 状态点放大效果。

<!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: "Microsoft YaHei", sans-serif;
        background: linear-gradient(135deg, #1a3a5c, #2d6a4f);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 20px;
        flex-wrap: wrap;
      }

      .card {
        width: 260px;
        background: white;
        border-radius: 12px;
        padding: 24px;
        cursor: pointer;
        /* 过渡：上浮 + 阴影 */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }

      .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 32px rgba(0,0,0,0.3);
      }

      .card h3 { color: #1a3a5c; margin-bottom: 12px; font-size: 18px; }

      .card .value {
        font-size: 36px;
        font-weight: bold;
        color: #1a3a5c;
        text-align: center;
        transition: color 0.3s ease;
      }

      .card:hover .value { color: #219ebc; }

      .card .label { text-align: center; color: #888; font-size: 14px; margin-top: 4px; }

      .card .status {
        display: inline-block;
        width: 10px; height: 10px;
        border-radius: 50%;
        margin-right: 6px;
        transition: transform 0.3s ease;
      }

      .card:hover .status { transform: scale(1.5); }

      .status-running { background: #2d6a4f; box-shadow: 0 0 8px rgba(45,106,79,0.5); }
      .status-stopped { background: #d62828; box-shadow: 0 0 8px rgba(214,40,40,0.5); }
    </style>
  </head>
  <body>
    <div class="card">
      <h3>压缩机 A</h3>
      <div class="value">58<span style="font-size:18px">℃</span></div>
      <div class="label"><span class="status status-running"></span>运行中</div>
    </div>
    <div class="card">
      <h3>冷却泵 B</h3>
      <div class="value">32<span style="font-size:18px">℃</span></div>
      <div class="label"><span class="status status-stopped"></span>已停机</div>
    </div>
    <div class="card">
      <h3>供料机 C</h3>
      <div class="value">45<span style="font-size:18px">℃</span></div>
      <div class="label"><span class="status status-running"></span>运行中</div>
    </div>
  </body>
</html>

动效分析：

动效	属性	触发	时长
卡片上浮	`transform: translateY(-8px)`	`:hover`	0.3s ease
阴影加大	`box-shadow` 值增大	`:hover`	0.3s ease
数字变色	`color` 从 `#1a3a5c` 到 `#219ebc`	`:hover`	0.3s ease
状态点放大	`transform: scale(1.5)`	`:hover`	0.3s ease

练习：照敲 → 把上浮距离从 -8px 改成 -12px → 把 transition 时长改成 0.5s → 把缓动改成 ease-out。

六、常见坑点与最佳实践

坑 1：transition 写在 hover 里

/* ❌ transition 写在 :hover 里，只有悬停时有过渡，移开时瞬间跳回 */
.card:hover { transition: transform 0.3s; transform: translateY(-8px); }

/* ✅ transition 写在元素本身上，悬停和移开都有过渡 */
.card { transition: transform 0.3s ease; }
.card:hover { transform: translateY(-8px); }

坑 2：不是所有属性都能过渡

/* ✅ 可以过渡的：数值类属性（color、opacity、transform、width 等） */
transition: opacity 0.3s;

/* ❌ 不能过渡的：display、position 等离散属性 */
transition: display 0.3s; /* 无效 */

最佳实践清单

[x] transition 写在元素本身上，不写在 :hover 里
[x] 做动画优先用 transform 和 opacity（性能最好）
[x] 缓动通用用 ease，出现用 ease-out，循环用 ease-in-out
[x] 不要给所有属性加过渡，明确指定要过渡的属性

七、这些知识在工业可视化里用在哪？

大屏面板悬停 = 上浮 + 阴影

.data-panel {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.data-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 150, 255, 0.2);
}

告警数字跳动 = transform + transition

.alert-value {
  transition: transform 0.3s ease, color 0.3s ease;
}
.alert-value.changed {
  transform: scale(1.2);
  color: #ff6b6b;
}

按钮 = 悬停放大

.screen-btn {
  transition: transform 0.2s ease, background 0.2s ease;
}
.screen-btn:hover {
  transform: scale(1.05);
  background: #2a5a8c;
}

八、自测挑战 10 题

transition 四个子属性分别是什么？
ease、linear、ease-in、ease-out 的区别？
transform: translateY(-10px) 和 top: -10px 的区别？
写出让元素悬停放大 1.1 倍并上浮 5px 的代码。
transform-origin 的作用？默认值？
transition 和 animation 的区别？各适合什么场景？
把卡片悬停效果从上浮改成水平右移 10px。
把 transition-duration 从 0.3s 改成 0.05s，感受"瞬间"和"平滑"。
给卡片加 transform: rotate(2deg) 的悬停效果。
用 F12 把 transition-duration 改成 2s，悬停看慢动作。

加分挑战：写一个"图片悬停放大"效果（overflow: hidden + transform: scale(1.2)）。

九、总结

今天学完，你应该能做到：

[x] 使用 transition 让属性变化平滑过渡
[x] 选择合适的缓动函数（ease/ease-out/linear）
[x] 使用 transform 做位移、旋转、缩放
[x] 理解 transition + transform 组合的威力
[x] 独立做出卡片悬停动效（上浮 + 变色 + 放大）

一句话带走：transition 让变化"平滑"，transform 让变化"高效"——hover 触发、transform 变化、transition 过渡，三件套让页面从"能用"升级到"精致"。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 5 周 · 第 2 篇

【HTML+CSS】day14-transition-transform