突破静态布局，掌握视觉交互的核心能力
很多前端学习者存在一个明显的断层：HTML 结构搭得再标准，CSS 基础选择器和盒模型背得再熟，一旦涉及“悬浮出现阴影”、“点击展开动画”、“响应式折叠菜单”这类需求时，往往无从下手，只能去网上复制粘贴现成的代码。这门课程专门填补的就是这个空白，它聚焦于 CSS 特效与交互实现，旨在帮你从“会写样式”跨越到“能做效果”。课程从最基础的 Emmet 语法规则讲起，确保代码编写效率，随后深入图像透明度控制、标题展示等基础特效，逐步过渡到复杂的响应式导航菜单实现。你不需要从零理解每一个概念，因为这里直接针对实际开发中遇到的视觉痛点进行拆解，解决你面对复杂 UI 效果时“不知道用什么属性”、“不知道如何组合动画”的实际困难。
实战驱动，从复制到独立构建
课程并非枯燥的属性罗列，而是以小米首页的横向和纵向导航栏特效为核心案例，带你完整复现真实商业项目中的交互细节。这部分内容极具代表性，因为它涵盖了媒体查询、定位技巧以及伪类状态的多种综合运用。除了导航特效，课程还引入了 CSS 绘图的基础知识，包括圆角边框和圆形的绘制原理，这对于优化图标显示、减少图片依赖至关重要。在学习过程中，资料包中的演示代码与理论讲解紧密配合，建议你采取“先看原理，再动手复现，最后尝试修改参数观察变化”的学习路径。不要仅仅满足于跑通代码，要重点思考为什么这里要用 `transform` 而不用 `position`，为什么动画过渡要设置特定的时序。只有将案例中的逻辑内化，才能在遇到新的设计稿时，独立构思出合适的 CSS 解决方案，而不是依赖搜索引擎找模板。
学完能做什么及学习建议
完成本阶段学习后，你将能够独立处理页面中的动态视觉效果，包括制作流畅的 hover 交互动画、构建适配不同屏幕尺寸的响应式菜单组件，以及利用纯 CSS 绘制简单的几何图形。这意味着你不再需要为简单的特效频繁引入 JavaScript 库，从而提升页面性能。建议基础薄弱的同学先回顾一下盒模型和定位机制，这是理解后续动画和布局变换的基石。学习时，请重点关注课程中对每一个属性变化过程的演示，特别是状态切换时的平滑过渡处理。配套练习资料是检验学习成果的关键，务必亲自敲一遍代码，哪怕只是修改几个颜色值或延迟时间，这种微小的改动也能让你深刻体会到 CSS 特效背后的控制逻辑，真正形成自己的代码直觉。
课程目录
1-1 [初识CSS特效] 认识CSS特效 (19:34) 1-2 [初识CSS特效] Emmet语法规则 (14:57) 1-3 [初识CSS特效] 演示：图像的透明度 (12:28) 1-4 [初识CSS特效] 演示：图像标题 (15:37) 2-1 [响应式菜单] 初识响应式菜单 (23:03) 2-2 [响应式菜单] 演示：页脚二维码 (16:33) 2-3 [响应式菜单] 演示：小米首页横向导航栏特效(上) (22:03) 2-4 [响应式菜单] 演示：小米首页横向导航栏特效(下) (17:25) 2-5 [响应式菜单] 演示：小米首页纵向导航栏特效(上) (21:45) 2-6 [响应式菜单] 演示：小米首页纵向导航栏特效(下) (08:31) 3-1 [CSS绘图基础] 圆角边框 (12:40) 3-2 [CSS绘图基础] 圆形 (12:56) 3-3 [CSS绘图基础] 演示：图片的展示 (17:29) 3-4 [CSS绘图基础] 演示：制作优惠卷 (18:17) 3-5 [CSS绘图基础] 演示：图标特效 (16:19) 3-6 [CSS绘图基础] 椭圆 (18:54) 3-7 [CSS绘图基础] 梯形 (13:11) 3-8 [CSS绘图基础] 三角形 (11:54) 3-9 [CSS绘图基础] 案例演示：画八卦图 (10:04) 4-1 [背景] 图片边框 (08:39) 4-2 [背景] 图片背景 (09:19) 4-3 [背景] 背景色彩的线性渐变 (08:59) 4-4 [背景] 线性渐变的角度和重复 (07:12) 4-5 [背景] 径向渐变的基本使用 (05:11) 4-6 [背景] 径向渐变的位置和大小 (11:26) 4-7 [背景] 阴影的基本使用 (09:55) 5-1 [2D转换] 移动--translate (21:08) 5-2 [2D转换] 旋转--rotate (08:46) 5-3 [2D转换] 放大缩小--scale (06:36) 5-4 [2D转换] 倾斜--skew (14:42) 5-5 [2D转换] 2D转换的合成 (12:02) 6-1 [3D转换] 3D转换的基本介绍 (10:06) 6-2 [3D转换] 3D移动--translate (19:23) 6-3 [3D转换] 3D旋转--rotate (13:02) 6-4 [3D转换] 案例演示：立方体 (22:08) 6-5 [3D转换] 3D放大缩小--scale (09:24) 6-6 [3D转换] 案例演示：旋转木马式展示图片 (16:43) 7-1 [过渡] 过渡的基本介绍 (12:55) 7-2 [过渡] 过渡的属性 (11:07) 7-3 [过渡] 案例演示：图片特效 (14:45) 7-4 [过渡] 案例演示：图标变名称 (09:50) 8-1 [动画] 动画的基本介绍 (15:53) 8-2 [动画] 动画的属性 (14:43) 8-3 [动画] 案例演示：旋转的边框 (13:25) 8-4 [动画] 案例演示：旋转的立方体 (16:22) 9-1 [第三季课程总结] CSS特效篇课程总结 (06:54)
