《web前端技术》---教案-第15课--CSS3高级应用之动画效果.pdfVIP

课题第15课CSS3高级应用之动画效果

课时2课时（90min）

知识技能目标：

（1）掌握关键帧的设置方法和属性

（2）掌握动画效果的相关属性

教学目标（3）掌握制作动画效果的方法

素质目标：

（1）学习CSS3高级应用之动画效果，拓宽视野，提高专业技能

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

教学重点：关键帧的设置方法和属性，动画效果的相关属性

教学重难点

教学难点：制作北极熊走路动画片段

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

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

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

教学设计第2节课：问题导入（5min）→实战演练（15min）→课堂检测（10min）→实训练习（10min）→课堂小结

（3min）→作业布置（2min）

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

第一节课

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

完成课前任务任务，让学准

备自己的素

课前任务提前了解关键帧的设置方法和属性，动画效果的相关属性，可以准备好自己想做的动画

材，为课堂上

素材，以备上课练习

学习相关技

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

培养学生

【教师】使用APP进行签到

考勤的组织纪律

（2min）【学生】按照老师要求签到性，掌握学生

的出勤情况

【教师】提出问题

在上节课中，我们学习了CSS3的变形效果和过渡效果，过渡效果只能在一个开始值

通过问题

与一个结束值之间添加，无法设置中间值，那CSS3可不可实现关键帧制作动画呢？

导入的方法，

问题导入【学生】思考、举手回答引导学生主

（3min）