模块9 转换、过渡与动画

《HTML5+CSS3网页设计技术》授课教案授课教案学校******大学（学院）任课教师***授课题目模块九转换、过渡和动画授课时间长度8学时所用教材HTM5+CSS3网页设计技术，黄玉春主编；中国科学技术出版社教学目标｜知识目标｜（1）理解CSS32D转换，并掌握常用的2D转换。（2）理解CSS33D转换，并掌握常用的3D转换。（3）能够掌握CSS3的过渡效果，实现一些简单的动态效果。（4）理解过渡与动画的区别，并能制作简单动画，将其应用于网页。｜能力目标｜（1）能够理解各种网页特效的本质。（2）能够正确选择相应技术制作相应特效。｜素质目标｜（1）通过学习各种实例解析，培养分析问题和解决问题的能力。（2）通过动态效果与动画案例的制作，培养严密的逻辑思维能力。教学重点（1）CSS32D转换。（2）掌握CSS3的过渡效果，实现一些简单的动态效果。教学难点CSS33D转换。教学方法任务引入法、课堂讨论、理论讲解、实操训练教学用具多媒体教学设备、教材、课件、实训素材教学过程主要教学内容及步骤考勤教师使用App或者点名等方式进行签到；学生按照老师要求签到任务导入打开一个有动画特效的网页，查看网页上的动画效果元素，引出本任务教学内容。教学内容任务一CSS32D转换CSS中的2D转换允许在二维空间中执行一些基本的变换操作，例如移动、旋转、缩放或扭曲等。变换后的元素与绝对定位的元素类似，不会影响周围的元素，但可以和周围的元素重叠，不同的是，转换后的元素仍处于文档流（在页面中仍然会占用为转换之前的空间）。一、转换中的二维坐标系在正确理解和运用CSS32D转换之前一定要理解其所使用的坐标系，如图9-1所示。图9-1CSS32D转换坐标系转换元素的左上角是坐标原点，向右为x轴的正方向，向下是y轴的正方向。二、2D位移2D位移可以改变元素的位置。可以通过transform属性translate()方法来实现。基本语法格式如下：transform:translate(x,y);在上面的语法中，参数x，y分别表示水平方向（x）和垂直方向（y）的位移量。在实际开发中，如果只希望元素水平方向或垂直方向上的移动，还可以通过transform属性translateX()方法或translateY()方法来实现。三、2D缩放2D缩放可以实现元素的放大或缩小。可以通过transform属性scale()方法来实现。基本语法格式如下：transform:scale(x,y);在上面的语法中，参数x，y分别表示水平方向（x）和垂直方向（y）的缩放倍数。参数可以是正数或负数，不需要加单位。其中，正数用于缩放大元素（大于1放大，小于1缩小），负数用于翻转缩放元素。当第2个参数值省略，则第2个参数值默认等于第1个参数值。缩放元素是以元素的中心点为参考点。四、2D旋转2D旋转可以让元素在二维平面内（沿Z轴，Z轴方向是由屏幕垂直指向读者），顺时针旋转或逆时针旋转。可以通过transform属性rotate()方法来实现。基本语法格式如下：transform:rotate(angle);在上面的语法中，参数angle表示旋转的角度值，单位是deg。角度值为正值表示顺时针旋转，负值表示逆时针旋转。旋转参考点为元素的中心点。五、变换原点元素变换时，默认的原点是元素的中心（50%50%），使用transform-origin可以设置变换的原点。修改变换原点对位移没有影响，对旋转、缩放和扭曲会产生影响。基本语法格式如下：transform-origin:x-axisy-axisz-axis;在上面的语法中，参数含义如下：（1）x-axis：定义原点X轴方向位于元素的位置（默认值50%，即中间）。可能的值：left|center|right|length|%。（2）y-axis：定义原点Y轴方向位于元素的位置（默认值50%，即中间）。可能的值：top|center|bottom|length|%。（3）z-axis：定义原点Z轴方向位于元素的位置（默认值0，即XY平面）。只能定义值：length。【例9-5】变换原点旋转。<style>/*变换原点后的2D旋转30度*/.one{transform:rotate(30deg);}/*变换原点左上角后的2D旋转30度*/.two{transform-origin:0px0px;transform:rotate(30deg);}</style>文件在浏览器中的预览效果如图9-6所示。图9-6变换原点旋转的效果六、matrix()方法matrix()方法可以看作是skew()、scale()和translate()几个方法的缩写形式，通过matrix()方法可以同时定义2D扭曲、缩放和位移操作。基本语法格式如下：transform:matrix(a,b,c,d,tx,ty);matrix()方法使用起来比较复杂，不容易理解，建议用多重变换。即多个变换，可以同时使用一个transform来编写。例如：transform:translate(-50%,-50%)rotate(45deg);注意：多重变换时，建议最后写旋转变换。任务二CSS33D转换（选学）在CSS中，除了可以对页面中的元素进行2D转换外，还可以对象元素进行3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。一、开启3D空间元素进行3D变换的首要操作需要将父元素开启3D空间。使用transform-style开启3D空间。基本语法格式如下：transform-style:flat|preserve-3d;在上面的语法中，参数可选值如下。（1）flat：让子元素位于此元素的二维平面内（2D空间），此为默认值。（2）preserve-3d：让子元素位于此元素的三维空间内（3D空间）。二、设置景深何为景深？指定观察者与z=0平面（可理解为屏幕）的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。使用perspective设置景深。基本语法格式如下：perspective:none|value;在上面的语法中，参数可选值如下：（1）none：不指定透视（默认值）（2）value：长度值。指定观察者距离z=0平面的距离（一般距离设置在500px-1000px），不允许负值。注意：perspective设置在发生3D变换元素的父元素。三、透视点位置所谓透视点位置，就是观察者位置，默认的透视点处于转换元素的中心。使用perspective-origin设置观察者位置（透视点的位置）。基本语法格式如下：perspective-origin:x-axis,y-axis,z-axis;在上面的语法中，参数含义如下。（1）x-axis：定义视图被置于X轴的何处。可能的值：left|center|right|length|%。（2）y-axis：定义视图被置于Y轴的何处。可能的值：top|center|bottom|length|%。（3）z-axis：定义视图被置于Z轴的何处。可能的值：length。默认值为50%50%0，表示透视点位置在元素的中心位置。例如：perspective-origin:400px300px;上面的代码设置了相对转换坐标原点往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）。注意：通常情况下，不需要调整透视点位置。四、3D旋转3D旋转主要是让元素沿x轴和y轴旋转，具体使用方式如下。（1）先给元素添加转换属性transform。（2）编写transform的具体值如下：rotateX(angle)：设置x轴旋转角度，需指定一个角度值（deg），面对x轴正方向：正值顺时针，负值逆时针。rotateY(angle)：设置y轴旋转角度，需指定一个角度值（deg），面对y轴正方向：正值顺时针，负值逆时针。rotate3d(x,y,z,angle)：前3个参数分别表示坐标轴：x、y、z，第4个参数表示旋转的角度，参数不允许省略。例如：transform:rotate3d(1,1,1,30deg)的意思是x、y、z分别旋转30度。五、3D位移2D位移是让元素沿x、y轴位移，3D位移是让元素沿z轴位移。3D位移相关方法如下：translateZ(z)：设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。ranslate3d(x,y,z)：第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略。六、3D缩放3D缩放是让元素沿z轴缩放。3D缩放相关方法如下：scaleZ(z)：设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。scale3d(x,y,z)：第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。任务三利用CSS过渡效果CSS提供了强大的过渡属性，使用此属性可以在不使用Flash动画或JavaScript脚本的情况下，为元素从一种形式转变为另外一种形式添加效果。一、过渡属性CSS3过渡是元素从一种样式逐渐改变为另一种的效果。transition-property属性设置应用过渡的CSS属性。其语基本法格式如下：选择器{transition-property:none|all|property;…}其属性取值有以下几种。（1）none：没有属性获得过渡效果（默认值）。（2）all：所有属性都将获得过渡效果。（3）property：定义过渡效果的CSS属性名称，多个属性之间用逗号分隔。【例9-10】transition-property属性使用演示。当鼠标悬停在区块上，区块大小改变。<style>div{width:100px;height:100px;background:red;transition-property:width,height;}div:hover{width:200px;height:200px;}</style>需要说明的是，CSS过渡效果需要一个触发事件，例如，鼠标悬停在有过渡效果的元素上。二、过渡持续时间属性transition-duration属性用于定义过渡属性的持续时间。其语法格式如下：选择器{transition-duration:time;}在上面的语法格式中，transition-duration属性的默认值是0。time取值为时间，可以是秒（m）或者毫秒（ms）。例如，将上例的样式代码修改如下：div{width:100px;height:100px;background:red;transition-property:width,height;transition-duration:2s;}在浏览器中运行文件，当鼠标悬停在区块上时，区块从宽度和高度100px变化到宽度和高度200px，花费2秒钟完成效果切换。三、过渡速度曲线属性transition-timing-function属性规定了过渡效果的速度曲线。其基本语法格式如下：选择器{transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);}在上面的语法格式中，transition-timing-function属性值有linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(参数)等。具体说明如下。（1）linear：规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。（2）ease：默认值。规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。（3）ease-in：规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。（4）ease-out：规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）。（5）ease-in-out：规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。（6）cubic-bezier(n,n,n,n)：在cubic-bezier（贝塞尔曲线）函数中定义自己的值。可能的值是0~1之间的数值。【例9-11】transition-timing-function属性使用演示。当鼠标悬停在区块上，区块过渡效果的速度曲线变化。<style>.outer{width:800px;height:270px;margin:0auto;border:1pxsolidblack;}.outer:hover.box{width:800px;}.box{width:200px;height:30px;line-height:30px;/*让所有能过渡的属性，都过渡*/transition-property:all;/*设置一个时间，所有元素都用*/transition-duration:4s;/*过渡延迟*/transition-delay:1s;}.box1{background-color:skyblue;transition-timing-function:ease;}.box2{background-color:orange;transition-timing-function:linear;}.box3{background-color:gray;transition-timing-function:ease-in;}.box4{background-color:tomato;transition-timing-function:ease-out;}.box5{background-color:green;transition-timing-function:ease-in-out;}.box6{background-color:purple;transition-timing-function:step-start;}.box7{background-color:deepskyblue;transition-timing-function:step-end;}.box8{background-color:chocolate;transition-timing-function:steps(20,end);}.box9{background-color:gold;transition-timing-function:cubic-bezier(1,.35,.78,1.24);}</style>文件在浏览器中的预览效果如图9-14所示。图9-14transition-timing-function属性本例设置了过渡效果的速度曲线的几种情况，当鼠标悬停在区块上，各个子块过渡效果的曲线变化情况的对比。四、过渡延迟时间属性transition-delay属性规定了过渡效果切换的延迟时间。其基本语法格式如下：选择器{transition-delay:time;}在上面的语法格式中，transition-delay属性的默认值是0。time取值为时间，可以是秒（m）或者毫秒（ms）。例如，将上例的样式代码修改如下：div:hover{border-radius:50%;background:pink;transition-property:border-radius,background;transition-timing-function:ease-in-out;transition-duration:2s;transition-delay:200ms;}在浏览器中运行文件。当鼠标悬停在区块上，200毫秒后开始切换效果。切换需要花费2秒的时间。经过这样处理，元素的切换效果更加平滑。五、过渡复合属性transition属性是一个复合属性，用于在同一个属性中设置transition-property、transition-duration、transition-timing-function和transition-delay等4个过渡属性。其基本语法格式如下：选择器{transition:propertydurationtiming-functiondelay;}使用transition-delay属性设置过渡效果可以简化代码的书写，但在定义时，它的各个参数必须按照顺序进行设置，不能颠倒。例如，代码：div:hover{border-radius:50%;transition-property:border-radius,background;transition-duration:2s;transition-timing-function:ease-in-out;transition-delay:200ms;}可以简写为：div:hover{background:pink;transition:border-radius2sease-in-out200ms;}任务四CSS3动画制作利用transition属性可以实现简单的过渡动画，但过渡动画仅能指定开始和结束两个状态，整个过程都是由特定的方法来控制的，不是很灵活。本任务讲解CSS3的动画与过渡的区别，以及CSS3动画制作方式。一、动画中的基本概念1．帧一段动画，从本质上讲就是一段时间内连续播放的一定数量的画面。每一幅画面叫做“帧”。2．关键帧关键帧是指在构成一段动画的若干帧中，起到决定性作用的2~3帧。如图9-15所示。图9-15关键帧二、过渡和动画的区别过渡和动画的主要区别在于：过渡需要触发一个事件才会随着时间改变其CSS属性；而动画在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。（1）动画不需要事件触发，过渡需要事件触发。（2）过渡只有一组关键帧（开始-结束），动画可以设置多个关键帧。三、动画的基本使用1．定义关键帧（定义动画）要创建CSS动画，首先需要了解@keyframes规则，@keyframes规则用来定义动画各个阶段（关键帧）的属性值，语法格式如下：@keyframes动画名{from{properties:value;}/*percentage：定义动画的各个阶段（关键帧），为百分比值，可以添加若干个*/percentage{properties:value;}to{properties:value;}}2．给元素应用动画给元素应用动画需要两个必要的属性。（1）animation-name：给元素指定具体的动画（指定要绑定到选择器的关键帧的名称）。（2）animation-duration：设置动画所需时间。【例9-12】CSS动画。<style>@keyframesball{from{top:0px;left:0px;}/*也可以写成0%{top:0px;left:0px;}*/25%{top:0px;left:350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}to{top:0px;left:0px;}/*或：100%{top:0px;left:0px;}*/}div{width:100px;height:100px;border-radius:50%;background-color:red;position:relative;/*动画必要属性*/animation-name:ball;animation-duration:2s;}</style>该例设置了一个小圆球从坐标（0，0）经过坐标（0,350px）（200px,350px）(200px,0)，移动到的坐标（0,0）的一个动画。四、动画的属性1．animation-delay属性animation-delay属性用于设置动画延迟，属性值为数值，单位为s（秒）或ms（毫秒）。2．animation-timing-function属性animation-timing-function属性用于设置动画的类型（与过渡类似），常用值如下。（1）ease：平滑动画（默认值）。（2）linear：线性过渡。（3）ease-in：慢→快。（4）ease-out：快→慢。（5）ease-in-out：慢→快→慢。（6）step-start：等同于steps(1,start)。（7）step-end：等同于steps(1,end)。（8）steps(integer,?)：