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

Web前端开发技术

教案设计

项目课题

CSS动画设计

授课时间

授课对象

大学生

学习目标

1.了解CSS的变形效果及其应用。

2.了解CSS的过渡效果及其应用。

3.了解CSS的动画效果及其应用。

学习重点

了解CSS的变形效果及其应用。

学习难点

了解CSS的过渡效果及其应用。

教学方法

讲授法、课堂演示法

教学用具

多媒体课件

教学流程

教学环节

教学内容

教学过程

任务一CSS变形

一、CSS变形属性transform

transform属性可以实现元素旋转、缩放、倾斜和移动这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-origin

CSS变形的原点默认是元素对象的中心点。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()