HTML5+CSS3+JavaScript Web 前端基础教程电子教案 单元 8 CSS3 动画.docxVIP

PAGE3

PAGE

单元8CSS3动画

课程名称

HTML5+CSS3+JavaScriptWeb前端基础教程

项目名称

CSS3动态效果开发实战

任务名称

CSS3过渡、转换、动画与渐变应用

课时

4

项目性质

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

授课班级

授课日期

授课地点

教学目标

知识目标

1．掌握CSS3过渡（transition）的属性、时长、timing-function配置；

2．理解CSS32D转换（translate/rotate/scale/skew）与3D转换的核心用法；

3．掌握CSS3动画（@keyframes）的定义与调用方法；

4．熟悉CSS3线性渐变与径向渐变的语法；

5．了解媒体查询的原理与响应式动画适配；

6．知道Animate.css插件的基础使用。

能力目标

1．能够使用过渡实现按钮hover动态效果（颜色、尺寸、阴影变化）；

2．能够运用2D转换实现元素的旋转、缩放、位移组合效果；

3．能够定义关键帧动画，实现元素的循环动画（如加载动画、滚动动画）；

4．能够使用渐变实现网页背景、按钮的渐变效果；

5．能够给淘宝首页添加轮播图动画、导航栏hover过渡效果；

6．能够使用媒体查询适配不同屏幕的动画效果。

素质目标

1．培养动态效果的审美能力与设计思维