Web前端技术项目式教程电子教案 任务五 CSS3过渡、变形和动画.docxVIP

PAGE1

PAGE

任务五CSS3过渡、变形和动画

课程名称

网页设计

项目名称

CSS3过渡、变形和动画

任务名称

CSS3过渡、变形和动画

课时

4

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

能力目标：

1.学会使用CSS3动画、过渡等制作动态网页。

2.学会使用CSS3的2D转换、3D转换实现网页元素的旋转、平移、缩放和倾斜效果。

知识目标：

1.熟悉CSS3过渡、变换和动画的语法规则。

2.了解3D透视的原理。

素质目标：

1.培养学生一定的界面设计、审美能力。

2.培养学生良好的编程习惯和严谨的工作态度。

教学内容

1.任务描述

2.任务展示与实现

（1）利用编辑工具编写CSS3代码并验证其效果

（2）学生动手操作

3.教师讲解本任务涉及的知识点

4.任务小结

教学重点

（1）实现首页和二级页面的水平导航条

（2）实现首页内容部分——华阳湖景区、岭南水乡小镇和职位列表

教学难点

（1）animation动画制作

教学准备

1.装有vscode的电脑

2.教学课件PPT

3.教材：《Web前端技术项目化教程》

作业设计

1．设计一个网站的首页菜单栏。

教学过程

教学

环节

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

课前组织

做好课前“5分钟”教学管