《HTML5+CSS3网站设计基础
教程》
教学设计
课程名称：HTML5+CSS3网站设计基础教程
授课年级：20XX年级
授课学期：20XX学年第X学期
教师姓名：XX老师
20XX 年XX 月XX 日
1
课题名称第9章 CSS3高级应用计划
课时
8课时
内容分析在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript 脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。本章将对CSS3中的过渡、变形和动画进行详细讲解。
教学目标●理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。
●掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。
●掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。
重点及措施教学重点：过渡、2D转换、3D转换、动画。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：过渡、3D转换、动画。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程
第一课时
（讲解transition-property、transition-duration、transition-timing-function、transition-delay、transition属性）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第八章“多媒体技
术”的相关知识。
1、运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件。
那么，在HTML5中，常见的视频格式有哪些？（）
A、Ogg
B、MPEG 4
C、WebM
D、avi
答案：ABC
视频格式包含视频编码、音频编码和容器格式。在HTML5中嵌入的视
频格式主要包括Ogg、MPEG 4、WebM等，具体介绍如下。
●Ogg：指带有Theora 视频编码和Vorbis 音频编码的Ogg 文件。
●MPEG 4：指带有H.264 视频编码和AAC 音频编码的MPEG 4 文
件。
●WebM：指带有VP8 视频编码和Vorbis 音频编码的WebM 文件。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript
2
3
（3）、教师对“transition-timing-function属性”的常用属性值进行讲解，
演示其具体用法和效果，通过对比分析不同属性值的异同。
（4）、教师对比“transition-timing-function属性”不同属性值的产生过渡
效果的速度曲线，并分析其异同。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“transition-delay属性”
（1）、教师通过PPT对“transition-delay属性”的概念及作用进行讲解，指出transition-delay属性规定过渡效果何时开始。
（2）、教师对“transition-delay属性”的基本语法格式进行讲解，并进行
代码演示。
（3）、教师对比“transition-delay属性”设置的过渡效果，并分析说明。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“transition属性”
（1）、教师对“transition属性”的概念进行讲解，指出transition属性是一个复合属性，用于在一个属性中设置transition-property、
transition-duration、transition-timing-function、transition-delay四个过
渡属性。
（2）、教师对“transition属性”的基本语法格式进行讲解，并进行代码演
示。
（3）、教师对使用“transition属性”设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性进行
讲解，并对比分析其优缺点。
（4）、教师指出应用“transition属性”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
✧阶段小结
➢小结
重点：transition属性。
➢答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识
点给与解释。
✧巩固练习
➢巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生
更熟练地掌握如何使用transition-property、transition-duration、
transition-timing-function、transition-delay属性设置元素的过渡效果。
➢通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补
充案例对相关知识点进行巩固。
第二课时
（讲解认识transform、2D转换、3D转换）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
4
1、通过上节课的学习，我们知道：在CSS3中，可以通过transition-property、transition-duration、transition-timing-function、transition-delay属性实现元素的过渡效果。那么，如何使用transition复css渐入渐出动画
合属性同时设置元素的四个过渡属性呢？请同学们进行讨论并举例说明。
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
●transition属性是一个复合属性，用于在一个属性中设置
transition-property、transition-duration、transition-timing-function、
transition-delay四个过渡属性。其基本语法格式如下：
transition：property duration timing-function delay;
在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进
行定义，不能颠倒。例如，下面设置元素的四个过渡属性：
transition-property:border-radius;
transition-duration:5s;
transition-timing-function:ease-in-out;
transition-delay:2s;
可以直接通过如下代码实现：
transition:border-radius 5s ease-in-out 2s;
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在CSS3之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript才能完成。CSS3出现后，通过transform属性就可以实现变形效果，。
那么，请同学们讨论下：使用transform属性可以实现哪几种变形效果？
请小组代表对以上问题发表见解。
答案：在CSS3中，使用transform属性可以实现变形效果，主要包括4种
变形效果，分别是：平移、缩放、倾斜和旋转：
●使用translate（）方法能够重新定义元素的坐标，实现平移的效果。
●使用scale() 方法用于缩放元素大小。
●使用skew()方法能够让元素倾斜显示。
●使用rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操
作。
✧知识点讲解
➢讲解“认识transform”
（1）、教师通过PPT对“CSS3 2D变形和CSS3 3D变形”产生的背景进行介绍。
5