任务概述

通过前面知识的学习，可以制作出一个静态的页面。可是我们会在网页上看到有很多图片或按钮会伴随有动画的效果。在以往，这些效果都是设计师依赖动态图片、Flash或JavaScript完成的。而CSS3将解决这一问题，借助CSS3可以轻松倾斜、缩放、移动及翻转元素。

本单元我们使用2D变形里的位移、旋转、缩放， CSS3过渡，以及CSS3如何实现动画效果。使用动画来为已完成的页面提高的视觉体验。应用动画样式将首页的静态大图改造成一个具有自动交替变换背景图片轮播区域，为页面中的静态内容增加鼠标互动效果，提升页面的友好度，希望通过反复优化修改页面的过程，提升精益求精的工匠精神。

素质目标

培养学生精益求精的工匠精神。

培养学生独立思考能力和岗位意识。

知识目标

了解transform 2D变形

了解transition过渡动画

理解animation网页动画实现过程

了解轮播图的概念

技能目标

熟练使用变形与过渡制作常见的鼠标交互特效

掌握使用动画制作简单的循环特效