任务9 制作学院风景墙.doc

教案名称

任务九制作学院风景墙

计划学时

4学时

知识目标

掌握通过transition属性生成过渡动画的方法

掌握通过transform属性生成2D变形的方法

能力目标

能够控制过渡时间、动画快慢等常见过渡效果

掌握CSS3中的变形属性，能够制作2D转换效果

素质目标

培养学生的团队协作能力

引导学生积极探索未知

培养学生不畏困难，勇往直前的精神，做社会和国家合格接班人

教学重点

过渡、2D转换

教学难点

2D转换

教学模式

教学做一体化

线上+线下混合教学

教学活动及主要环节

思政元素

切入点

第1学时

（过渡属性）

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。

=1\*ROMANI.学生讨论：（5分钟）

传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。那么，在CSS3中，过渡属性主要包括哪些呢？

（学生回答，教师对问题进行讲解）

CSS3中，过渡属性主要包括transition-property、transition-duration、transition-timing-function、transition-delay四种。

transition-property属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。

\oCSS3transition-duration属性transition-duration属性用于定义过渡效果花费的时间。

transition-timing-function属性规定过渡效果的速度曲线。

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。

=2\*ROMANII.重难点内容讲授：（40分钟）

transition-property属性

（1）教师通过PPT对transition-property属性的概念及作用进行讲解，指出transition-property属性用于指定应用过渡效果的CSS属性的名称。

（2）教师transition-property属性的基本语法格式进行讲解，并进行代码演示。

（3）教师对transition-property属性的三个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。

transition-property:none|all|property;

（4）教师指出应用transition-property属性时需要注意的问题，并给予解答。

二、transition-duration属性

（1）教师通过PPT对transition-duration属性的概念及作用进行讲解，指出transition-duration属性用于定义过渡效果花费的时间。

（2）教师对transition-duration属性的基本语法格式进行讲解，并进行代码演示。

（3）教师指出在设置过渡效果时，必须使用transition-duration属性设置过渡时间，否则不会产生过渡效果。

三、transition-timing-function属性

（1）教师通过PPT对transition-timing-function属性的概念及作用进行讲解，指出transition-timing-function属性规定过渡效果的速度曲线。

（2）教师对transition-timing-function属性的基本语法格式进行讲解，并进行代码演示。

（3）教师对transition-timing-function属性的常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。

（4）教师对比transition-timing-function属性不同属性值的产生过渡效果的速度曲线，并分析其异同。

四、transition-delay属性

（1）教师通过PPT对transition-delay属性的概念及作用进行讲解，指出transition-delay属性规定过渡效果何时开始。

（2）教师对transition-delay属性的基本语法格式进行讲解，并进行代码演示。

（3）教师对比transition-delay属性设置的过渡效果，并分析说明。

五、transition属性

（1）教师对transition属性的概念进行讲解，指出transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transiti