第 5 周总结：CSS 进阶与动效 — 让页面"活"起来
蜗牛往上爬 · 前端工业可视化学习笔记 第 5 周总结
本周是 CSS 的"进阶收尾周"——定位让元素脱离文档流，transition 让变化平滑，transform 让变形高效，@keyframes 让动画自动播放，伪元素让装饰不污染 HTML。这五样能力组合起来，就是大屏的"视觉灵魂"。
目录
一、本周学了什么
知识图谱
CSS 进阶与动效
├── 定位（position）
│ ├── static（默认）
│ ├── relative（相对自己，不脱标）
│ ├── absolute（相对定位祖先，脱标）
│ ├── fixed（相对窗口，脱标，不随滚动）
│ ├── sticky（粘性，到达阈值后固定）
│ ├── 定位上下文：父relative + 子absolute
│ └── z-index（层级控制）
│
├── 过渡（transition）
│ ├── transition-property / duration / timing-function / delay
│ ├── 缓动：ease / linear / ease-in / ease-out / ease-in-out
│ └── 写在元素本身，不写在 :hover 里
│
├── 变换（transform）
│ ├── translate（位移）
│ ├── rotate（旋转）
│ ├── scale（缩放）
│ ├── skew（倾斜）
│ ├── transform-origin（变换原点）
│ └── 性能好：只触发合成，不触发重排
│
├── 动画（animation）
│ ├── @keyframes（定义关键帧）
│ ├── animation-name / duration / timing-function / iteration-count / direction
│ ├── infinite（无限循环）
│ └── transition vs animation：触发式 vs 自动播放
│
└── 伪元素（::before / ::after）
├── content（必须写）
├── 不修改 HTML，插入虚拟元素
├── 装饰用伪元素，功能用真实 DOM
└── 伪元素 + 动画 = 呼吸灯边框
二、三个练习页面回顾
练习 1：设备信息弹窗
用时：Day 1-2，约 2 小时
核心代码：
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal { position: relative; }
.close-btn { position: absolute; top: 12px; right: 16px; }
收获：掌握了 positioning 五种模式 + 遮罩层弹窗模式。fixed 做全屏遮罩，absolute 做关闭按钮，z-index 控制层级。
练习 2：卡片悬停动效
用时：Day 3-4，约 2 小时
核心代码：
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.card:hover .value { color: #219ebc; }
.card:hover .status { transform: scale(1.5); }
收获：transition + transform 组合是悬停动效的标配。translateY 上浮、scale 放大、transition 平滑过渡。
练习 3：呼吸灯面板 + 数据跳动
用时：Day 5-6，约 2 小时
核心代码：
.panel::before { animation: borderBreathe 2s ease-in-out infinite; }
.panel.alert::before { animation: alertBreathe 1s ease-in-out infinite; }
.panel.loading::after { animation: spin 1s linear infinite; }
.value { animation: countUp 0.6s ease-out; }
收获：@keyframes + 伪元素 = 大屏动效。呼吸灯用 ::before，旋转加载用 ::after，完全不污染 HTML。
三、动效核心速记
定位速记
static → 默认
relative → 微调，做定位上下文
absolute → 弹窗，相对定位祖先
fixed → 固定导航/遮罩，相对窗口
sticky → 吸顶，到达阈值后固定
transition vs animation
transition → 需要触发器（hover/focus）
animation → 自动播放，可循环
transform → 位移/旋转/缩放，性能好
常用动画模板
呼吸灯 → opacity 1 ↔ 0.3
数据跳动 → translateY + opacity
旋转 → rotate(0deg → 360deg)
闪烁 → opacity 0 ↔ 1
边框呼吸 → border-color + box-shadow
伪元素黄金法则
装饰（边框呼吸、图标、分割线）→ ::before / ::after
功能（按钮、输入框） → 真实 DOM
四、本周踩过的坑
五、自测清单
全部打勾再进入下一周。
[ ] 能说出 position 五种模式：static/relative/absolute/fixed/sticky
[ ] 能解释"父relative + 子absolute"模式
[ ] 能使用 z-index 控制层级
[ ] 能写出 transition 简写（属性 时长 缓动）
[ ] 能使用 transform 做位移（translate）、旋转（rotate）、缩放（scale）
[ ] 能说出 transition 和 animation 的区别
[ ] 能写出 @keyframes 关键帧动画
[ ] 能使用 animation 简写
[ ] 能使用 ::before 和 ::after 伪元素
[ ] 能做出呼吸灯边框（伪元素 + 动画）
[ ] 3 个练习页面全部完成并在浏览器验证
[ ] 每日博客文章 1 篇（共 3 篇）+ 本篇周总结 = 4 篇完成
六、下周预告
第 6 周：综合实战——大屏风格静态页面
下周是阶段 0 的收官周——综合 HTML+CSS 所有知识，做一个完整的大屏风格静态页面。
预计内容：
大屏布局设计（1920×1080 固定尺寸）
深色主题 + 渐变 + 半透明面板
数据面板网格（Grid 布局）
呼吸灯边框 + 数据跳动动效
完整的"智慧工厂监控大屏"静态页面
动手练：从零搭建一个完整的大屏静态页面，包含标题栏、数据面板、图表占位区、告警面板、底部状态栏。
📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 5 周 · 总结篇