《web前端技术》---教案-第14课--CSS3高级应用之变形效果和过渡效果.pdfVIP

课题第14课CSS3高级应用之变形效果和过渡效果

课时2课时（90min）

知识技能目标

（1）熟悉变形效果的相关知识，包括变形属性、2D变形和3D变形

（2）熟悉过渡效果的相关属性，了解常见过渡效果的应用场景及触发方式

教学目标

素质目标

（1）学习CSS3高级应用之变形效果和过渡效果，拓宽视野，提高专业技能

（2）提高对事物的观察和归纳总结能力，养成好的编程习惯和思维方式

教学重点2D变形和3D变形的方式

教学重难点

教学难点过渡效果的相关属性

教学方法问答法、讨论法、讲授法、实践练习法、演示法

教学用具电脑、投影仪、多媒体课件、教材、APP

第1节课课前任务→考勤（2min）→问题导入（3min）→传授新知（25min）→实战拓展（15min）

教学设计第2节课问题导入（5min）→传授新知（25min）→实战拓展（10min）→课堂小结（3min）→作业布置

（2min）

教学过程主要教学内容及步骤设计意图

第一节课

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软通过课前任

件，完成课前任务务，让学生了解

从网上查找CSS3的动画实例，体会CSS3的效果，并思考自己队伍的项目想加什么动画，CSS3的动画实

课前任务

达到什么效果，运用什么方法例效果，为课堂

上学习相关技

【学生】完成课前任务术做准备

培养学生的

【教师】使用APP进行签到

考勤组织纪律性，掌

（2min）【学生】按照老师要求签到握学生的出勤

情况

【教师】提出问题

在上次课上我们学习了CSS的布局，在实际应用中，CSS3的应用更加多样化，不仅

可以设置元素的样式，还可以实现动态特效，在课前大家应该对CSS3的动态效果有了一通过问题导

些了解，有没有同学说说，都有哪些动态特效，在实际网页的设计中，一般运用于哪些入的方法，引导

问题导入地方？学生主动思考，

（3min）

【学生】思考、举手回答激发学生的学