Web前端技术项目式教程课件 任务五 CSS3过渡、变形和动画.pptxVIP

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）

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

知识目标1熟悉CSS3过渡、变形和动画的语法规则。2了解3D透视的原理。

能力目标1学会使用CSS3动画、过渡等完成网页动态效果。2学会使用CSS3的2D、3D转换完成网页元素的旋转、平移。缩放和倾斜效果。

素质目标1培养学生具备一定的界面设计审美能力。2培养学生良好的编程习惯和严谨的工作态度。

思维导图

任务描述李明接到宣传部制作中华传统文化照片墙页面的任务。本任务的具体要求如下。用10张图像作为照片。照片按照不同的位置和旋转角度随意摆放。鼠标指针移动到某一张照片上时，此照片由倾斜缓慢旋转成端正，并且放大显示在最上层。

知识引入1.过渡（transition）2.变换（transform）3.透视（perspective）4.动画（animation）

1.过渡（transition）⑴transition-propertytransition-property用于规定应用过渡的CSS属性的名称。语法格式如下：transition-property:none|all|property;属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗