Web 前端开发技术 教案 项目六 CSS 动画设计

Web前端开发技术教案设计项目课题CSS动画设计授课时间授课对象大学生学习目标1.了解CSS的变形效果及其应用。2.了解CSS的过渡效果及其应用。3.了解CSS的动画效果及其应用。学习重点了解CSS的变形效果及其应用。学习难点了解CSS的过渡效果及其应用。教学方法讲授法、课堂演示法教学用具多媒体课件教学流程教学环节教学内容教学过程任务一CSS变形一、CSS变形属性transformtransform属性可以实现元素旋转、缩放、倾斜和移动这4种类型的变形处理。指定的元素可以是块级元素和内联元素,其基本语法格式如下。{transform:none|变形函数;}属性值设置为none时,元素不变形,还可以设置多个变形函数,用空格分离。变形函数有2D变形和3D变形的函数,可分别实现2D和3D变形的效果。二、2D函数1.2D旋转变形函数rotate()2D旋转变形函数rotate()对指定的元素在二维空间内进行旋转,其基本语法格式如下。{transform:rotate(旋转角度);}旋转角度取值的单位可以为deg(度)、grad(梯度)、rad(弧度)或turn(圈)。2.2D缩放变形函数scale()2D缩放变形函数scale()对指定的元素在二维空间内进行缩放,其基本语法格式如下。{transform:scale(缩放值);}缩放值可以是正数或负数。正数是缩放的比例倍数,负数是翻转元素后再缩放的比例倍数。若缩放值为一个参数,则表示宽度和高度采用同样的缩放值;若缩放值为两个参数,则分别表示宽度缩放值和高度缩放值,用逗号分隔。3.2D移位变形函数translate()2D移位变形函数translate()对指定的元素在二维空间内进行坐标移位,其基本语法格式如下。{transform:translate(坐标偏移值);}坐标偏移值是水平和垂直方向相对于原位置偏移的距离。若坐标偏移值设一个参数,则表示设置水平偏移值,而垂直偏移值默认为0;若坐标偏移值设两个参数,则分别表示水平和垂直方向偏移值,用逗号分隔。正数表示向右或向下,负数表示向左或向上。4.2D倾斜变形函数skew()2D倾斜变形函数skew()对指定的元素在二维空间内进行倾斜显示,其基本语法格式如下。{transform:skew(倾斜值);}倾斜值是相对于坐标轴倾斜的角度。若倾斜值设一个参数,则表示相对于x轴的倾斜角度,而相对于y轴的倾斜角度默认为0;若倾斜值设两个参数,则分别表示相对于x轴的倾斜角度和相对于y轴的倾斜角度,用逗号分隔。倾斜和旋转不同,旋转不会改变元素形状,但倾斜会改变元素形状。5.2D矩阵变形函数matrix()2D矩阵变形函数matrix()可以实现多种变形效果。该函数有6个参数,经过矩阵计算实现变形效果,实现缩放和平移的基本语法格式如下。matrix(x轴缩放值,0,0,y轴缩放值,x轴移动值,y轴移动值)实现移位和旋转(θ)的基本语法格式如下。matrix(cosθ,-sinθ,sinθ,cosθ,x轴移动值,y轴移动值)三、2D变形原点属性transform-originCSS变形的原点默认是元素对象的中心点。transform-origin属性用于改变2D变形的中心点,其基本语法格式如下。{transform-origin:x坐标y坐标;}原点的x坐标和y坐标可以是百分比、数值(em、px)、方位词(left、center、right、top、middle、bottom)等。四、3D函数1.3D旋转变形函数rotate3d()3D旋转变形函数rotate3d()对指定的元素在三维空间内进行旋转,可以分别用rotateX()、rotateY()、rotateZ()指定旋转的坐标轴,其基本语法格式如下。{transform:rotate3d(x坐标,y坐标,z坐标,旋转角度);}/*指定x、y、z坐标点旋转角度*/{transform:rotateX(旋转角度);}/*沿x轴旋转*/{transform:rotateY(旋转角度);}/*沿y轴旋转*/{transform:rotateZ(旋转角度);}/*沿z轴旋转*/2.3D缩放变形函数scale3d()3D缩放变形函数scale3d()对指定的元素在三维空间内进行缩放,可以分别用scaleX()、scaleY()、scaleZ()指定缩放的坐标轴,其基本语法格式如下。{transform:scale3d(x轴缩放值,y轴缩放值,z轴缩放值);}/*指定x、y、z轴缩放值*/{transform:scaleX(缩放值);}/*沿x轴缩放*/{transform:scaleY(缩放值);}/*沿y轴缩放*/{transform:scaleZ(缩放值);}/*沿z轴缩放*/3.3D移位变形函数translate3d()3D移位变形函数translate3d()对指定的元素在三维空间内进行移位,可以分别用translateX()、translateY()、translateZ()指定移位的坐标轴,其基本语法格式如下。{transform:translate3d(x轴移位偏移值,y轴移位偏移值,z轴移位偏移值);}/*指定x、y、z轴移位偏移值*/{transform:translateX(移位偏移值);}/*沿x轴移位*/{transform:translateY(移位偏移值);}/*沿y轴移位*/{transform:translateZ(移位偏移值);}/*沿z轴移位*/五、3D透视视图属性perspective3D变形中z轴的变形要在3D透视视图中才有效果。3D透视视图属性perspective用于设置3D元素与视图的距离,单位为像素(px),其基本语法格式如下。{perspective:距离值;}任务二CSS过渡一、过渡属性transition-property过渡属性transition-property用于设置过渡的属性名称,其基本语法格式如下。{transition-property:none|all|属性列表}属性值为none,表示没有过渡属性;属性值为all,表示所有属性。属性列表中可以是颜色、大小、位置等相关的属性,用空格分隔。二、过渡时间属性transition-duration过渡时间是指属性值过渡转换的时间长度,单位是秒(s)。默认的过渡时间是0秒。过渡时间属性transition-duration用于指定过渡时间长度,可以在过渡时间内看到过渡转换的过程,如果不设置过渡时间,则会直接看到结束属性值的效果,其基本语法格式如下。{transition-duration:时间长度;}三、过渡延迟时间属性transition-delay过渡延迟时间属性transition-delay用于设置过渡延迟的时间长度。默认过渡延迟时间为0秒,即当触发事件发生时,过渡转换就开始,其基本语法格式如下。{transition-delay:延迟时间长度;}延迟时间长度单位为秒(s)或毫秒(ms)。延迟时间长度可以为正整数或负整数。若延迟时间长度为正整数,则表示延迟指定时间后过渡变化才开始;若延迟时间长度为负整数,则表示延迟时间长度前的过渡不显示,只显示延迟时间长度之后的过渡转换效果。四、过渡效果速度属性transition-timing-function过渡效果速度属性transition-timing-function用于设置过渡过程中的速度变化,其基本语法格式如下。{transition-timing-function:过渡效果速度值;}五、过渡复合属性transition过渡复合属性transition可以同时指定过渡变化的属性、时间、延迟时间等子属性值,其基本语法格式如下。{transition:过渡属性值过渡时间值过渡效果速度属性值过渡延迟时间值;}子属性值之间用空格间隔。过渡复合属性可以设置多个过渡属性变化,用逗号分隔。任务三CSS关键帧动画一、定义关键帧动画命令@keyframes定义关键帧动画用命令@keyframes,其基本语法格式如下。@keyframes关键帧动画名称{帧的时间位置{属性:属性值;}帧的时间位置{属性:属性值;}……}帧的时间位置是指帧处于动画时长的百分比位置,可以用0~100%表示,也可以用from(0)、to(100%)表示。在一个关键帧中,可以为对象的多个属性设置值,这些值的变化可以产生各种动画效果。二、关键帧动画属性animation定义了关键帧动画之后,通过设置关键帧动画属性animation的属性值运行关键帧动画。animation属性包含多个子属性,用来设置动画的细节效果,其基本语法格式如下。{animation:关键帧动画名称动画播放时间动画效果速度动画延迟时间动画播放次数动画播放方向动画状态动画时间外状态;}动画效果速度属性的属性值和过渡效果速度属性的属性值一样。动画播放次数默认是1次,为infinite时,动画重复播放。动画播放方向值为normal时,动画每次循环都向前播放;为alternate时,动画第偶数次向前播放,第奇数次反向播放。动画状态有running(运动)和paused(暂停)两个属性值。动画时间外状态表示动画不运行时的状态。为none时,表示不设置动画时