04CSS3 进阶
现代网页颜值的全部来源：圆角阴影、背景渐变、文本特效、2D/3D 变换、过渡、动画、响应式。
8 节课把 transition / animation / transform 彻底拿下——
用实时实验台感受每一帧的「演」。
课程列表
01
CSS3 总览
CSS3 模块化总纲：从圆角阴影到动画响应式，现代网页颜值的全部来源一览。
02圆角边框与阴影
border-radius 圆角细节、box-shadow 四参 + inset 内外阴影、多重阴影分层。
03背景与渐变
多重背景、background-size / origin / clip，以及 linear / radial / conic 三大渐变函数与渐变按钮文本。
04文本效果与字体
text-shadow 立体字、word-break / white-space / text-overflow 文本长句处理与 @font-face 自定义字体。
052D 与 3D 转换
transform 挪转缩斜四将、支点 transform-origin、perspective 视距、preserve-3d 与 3D 翻牌实战。
06过渡
transition 四要素全解：property / duration / timing / delay，性能三档与纯 CSS 抽屉实战。
07动画
@keyframes 分镜表 + animation 八属性全解：direction / fill-mode / 多动画 / 跑马灯 / loading 三件套。
08响应式设计
viewport、@media 完整语法、断点、移动优先、免媒体查询三板斧与容器查询——学习路线收官。
本章你将学会
- 用圆角、阴影、渐变、文本特效四件套给页面制造质感和层次
- 用
transform摆任何姿势，并进入 3D 空间实现翻牌、立体卡片 - 用
transition让状态变化平滑补间，掌握动效四要素与性能三档 - 用
animation+@keyframes打造自动循环演出：跑马灯、loading、入场氛围 - 用
@media/clamp/auto-fill/@container让一套代码适配所有屏幕
实验台使用指南
本站每个知识点都配有「左代码、右实时预览」的实验台。本章大量动效类实验台特别要活用：
| 操作 | 效果 |
|---|---|
| 直接改左侧代码 | 右侧预览 0.35 秒内自动刷新——CSS 动画 / 过渡 / 变换 / 渐变都能实时跑 |
改 animation 时长 / 曲线 | 同一套关键帧，1.6s ↔ 4s、ease ↔ cubic-bezier，节奏立变 |
| 拖拽中间分隔条 | 左右分屏比例任意调整，双击分隔条恢复 1:1；改宽时 @media 断点随之响应 |
| 悬停预览区元素 | 过渡 / 悬停动画（放大卡片、翻牌）直接在预览区触发 |
| 工具栏「主题」下拉 | 暖墨 / 暖纸 / 夜幕 / 抹茶四套高亮主题，全站记忆 |
| 「重置」按钮 | 把时长改乱也不怕，一键回到初始代码重看原速 |
学习建议：动效实验台至少改三处值——时长、曲线、关键帧站点。
看懂不如改懂，改坏再修好，动画的「手感」就是这样练出来的。