第7单元 CSS动画简介和坐标系（教案1：2 学时）

教学设计一、基本信息课程名称Web前端开发技术课题名称CSS动画简介和坐标系授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络，配备超星教学平台）授课学时40分钟*2学时教材分析本节是CSS动画模块的开篇，衔接HTML/CSS基础，铺垫后续变形、过渡、动画属性学习，通过乡村主题案例串联，兼具理论性与实用性，是构建动态网页的基础。学情分析1.前置基础：已掌握HTML标签、CSS基础样式（选择器、盒子模型），能搭建简单静态网页。

2.学情特点：动手能力强、抽象逻辑弱、具象思维突出，对实操任务兴趣浓厚，对抽象坐标系易困惑。

3.潜在不足：缺乏空间想象能力，需借助具象演示突破难点。教学目标【知识目标】：

1.了解CSS动画的概念及三种核心属性（transition、transform、animation）。

2.掌握左手坐标系及CSS33D坐标系的规则，明确各轴正方向。

【能力目标】：

1.能通过手势演示左手坐标系，准确判断各轴旋转方向。

2.能借助工具模拟CSS3坐标系，为后续3D动画奠定基础。

【素质目标】：

1.培养空间想象能力和严谨的逻辑思维。

2.激发用前端技术展示美丽乡村的创作热情，践行乡村振兴文化传播理念。教学重点1.CSS动画三种核心属性的功能区分。

2.左手坐标系的构建及各轴正方向判断。教学难点1.CSS33D坐标系与左手坐标系的差异（绕X轴旋转180度）。

2.利用左手法则判断各轴旋转方向。教学准备1.硬件：机房计算机（每人一台）、投影仪、鼠标（便于演示操作）。

2.软件：超星教学平台（上传课件、案例代码、实操任务单）、浏览器（Chrome）、记事本/VSCode。

3.素材：美丽乡村图片、坐标系演示动图、实操任务模板代码。教学方法1.主导方法：BOPPPS教学法。

2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、小组协作法。板书设计CSS动画简介与坐标系

1.三大属性：过渡（transition）、变形（transform）、动画（animation）

2.左手坐标系：拇X（右）、食Y（上）、中Z（前）

3.CSS3坐标系：Z轴正向为屏幕外，左手法则判旋转二、教学设计教学环节教学内容师生活动设计意图/时间第一学时（40分钟）

环节一：导入（Bridge-in）1.案例展示：播放两段美丽乡村网页效果（静态图片展示页、带简单动画的图片展示页），对比差异。

2.问题引导：“为什么带动画的网页更吸引人？这些动态效果用什么技术实现？”

3.引出课题：CSS动画简介及坐标系，说明本节课是实现动态网页的基础，衔接后续乡村主题实训。教师：1.通过超星平台展示案例，引导学生观察对比。

2.提问互动，收集学生答案，梳理核心需求。

3.明确本节课学习目标和重点。

学生：1.观察案例，感受动画对网页的提升作用。

2.积极思考并回答问题，明确学习方向。设计意图：以对比案例激发兴趣，结合乡村主题，贴合教材情境，自然引出课题。

时间：5分钟环节二：目标告知（Objective）1.知识目标：掌握CSS动画三大属性功能、左手坐标系规则。

2.能力目标：能演示左手坐标系，区分两种坐标系差异。

3.素质目标：培养空间想象能力，树立技术服务文化传播的意识。

4.重难点提示：重点为三大属性与左手坐标系，难点为CSS3坐标系及旋转方向判断。教师：1.结合超星平台课件，清晰罗列三维目标。

2.用不同颜色标注重难点，强调其在后续学习中的作用。

学生：1.记录学习目标和重难点，明确学习侧重点。

2.对难点内容产生预判，做好学习准备。设计意图：明确学习方向，让学生带着目标学习，提升课堂效率。

时间：3分钟环节三：前测（Pre-assessment）1.基础提问：“HTML中插入图片用什么标签？CSS中设置图片宽度用哪个属性？”

2.实操小任务（5分钟）：在VSCode中创建HTML文件，插入一张美丽乡村图片，用CSS设置宽度300px、居中显示。

3.结果反馈：随机抽查3-4名学生作品，点评共性问题（如居中方法、路径错误）。教师：1.口头提问，快速了解学生前置知识掌握情况。

2.发布实操任务，巡视指导，记录学生问题。

3.点评作品，纠正错误，巩固前置技能。

学生：1.回答问题，回顾旧知。

2.独立完成实操任务，排查自身知识漏洞。

3.聆听点评，修正作品。设计意图：检测前置知识掌握情况，为新知学习铺垫，同时调动学生动手积极性。

时间：7分钟（提问2分钟+实操5分钟）环节四：参与式学习（Participation）1.CSS动画简介：

（1）讲解概念：CSS动画实现元素样式平滑转换，替代传统JavaScript复杂代码。

（2）三大属性讲解：结合乡村图片案例，演示各属性核心功能——过渡（平滑切换样式）、变形（位移/旋转等）、动画（关键帧控制复杂效果），明确三者区别。

2.左手坐标系：

（1）手势教学：引导学生伸出左手，拇指（X轴，右）、食指（Y轴，上）、中指（Z轴，前）构建坐标系。

（2）小组互动：2人一组，互相检查手势准确性，教师巡视纠错。教师：1.用通俗语言讲解概念，结合课件动图演示属性功能，避免抽象。

2.示范左手坐标系手势，逐一纠正学生动作，强调各轴正方向。

3.组织小组互动，设置“手势达标”小任务，激发参与感。

学生：1.聆听讲解，结合案例理解三大属性功能。

2.跟随示范做手势，与组员互相检查，巩固坐标系构建方法。设计意图：采用手势教学和小组互动，将抽象知识具象化，贴合职校生具象思维特点，突破左手坐标系重点。

时间：25分钟（第一学时结束）第二学时（40分钟）

环节四：参与式学习（Participation）（续）3.CSS33D坐标系：

（1）对比讲解：与左手坐标系差异——绕X轴旋转180度，X轴（右）、Y轴（下）、Z轴（屏幕外）。

（2）工具演示：用超星平台上传的坐标系演示工具，模拟旋转过程，直观展示差异。

4.左手法则判断旋转方向：

（1）法则讲解：左手握住旋转轴，拇指指向正方向，手指卷曲方向为旋转正向（顺时针）。

（2）案例演示：以X轴、Y轴为例，结合乡村图片旋转效果，演示法则应用，逐一讲解各轴旋转方向。

（3）小组练习：每组分配一个轴，讨论旋转方向，派代表演示说明。教师：1.借助演示工具突破坐标系差异难点，避免纯理论讲解。

2.分步演示左手法则，结合实例让学生理解旋转方向判断方法。

3.组织小组讨论，鼓励学生主动表达，及时纠正错误认知。

学生：1.观察演示工具，对比两种坐标系差异，建立空间认知。

2.跟随练习左手法则，参与小组讨论，主动演示判断过程。设计意图：借助工具演示和小组练习，化解CSS3坐标系差异及旋转方向判断的难点，提升学生参与度和空间想象能力。

时间：20分钟环节五：后测（Post-assessment）1.理论提问：

（1）CSS动画三大属性分别是什么？各核心功能是什么？

（2）CSS3坐标系中Z轴正方向是哪里？

2.实操任务（10分钟）：

（1）新建HTML文件，插入乡村图片，结合所学，用注释标注出CSS3坐标系各轴正方向。

（2）用左手法则判断图片绕Y轴旋转的正向，在代码中添加注释说明。

3.成果验收：随机抽查学生作品，点评重难点掌握情况，讲解共性问题。教师：1.口头提问，快速检测理论知识掌握情况。

2.发布实操任务，明确步骤和要求，巡视指导，重点关注难点应用。

3.点评作品，针对坐标系标注错误、旋转方向判断失误等问题，再次强化讲解。

学生：1.回答理论问题，巩固知识记忆。

2.独立完成实操任务，将理论知识应用于实践，排查难点漏洞。

3.聆听点评，修正作品，深化理解。设计意图：理论+实操结合检测学习效果，针对性强化重难点，确保学生掌握核心知识，实现理实一体化目标。

时间：15分钟环节六：总结与延伸（Summary）1.课堂总结：

（1）梳理核心知识点：三大属性功能、左手坐标系、CSS3坐标系、左手法则。

（2）重难点回顾：强调两种坐标系差异及旋转方向判断方法，明确其对后续3D动画学习的重要性。

2.知识延伸：预告下节课内容（transform变形属性），引导学生在超星平台预习案例代码，思考如何用变形属性操控乡村图片。教师：1.用思维导图形式梳理知识点，帮助学生构建知识框架。

2.重申重难点，强化记忆，发布预习任务，做好知识衔接。

学生：1.跟随总结回顾知识点，完善笔记，梳理知识逻辑。

2.明确预习任务，借助超星平台提前了解下节课内容。设计意图：梳理知识框架，强化重难点记忆，做好课时衔接，为后续学习铺垫。

时间：5分钟（第二学时结束）三、课后作业和教学反思课后作业1.完善课堂实操任务，添加3条注释，分别说明左手坐标系、CSS3坐标系及Y轴旋转正向判