Web 前端开发技术（HTML5+CSS3+JavaScript+jQuery） 课件 项目六　 CSS 动画设计.pptx

CSS动画设计Web前端开发技术篇2：CSS技术

本项目介绍CSS的变形属性和变形函数,以及CSS的动画效果和应用示例。通过完成开放式任务可以培养学生的发散思维和创新精神。党的二十大报告提出“必须坚持科技是第一生产力、人才是第一资源、创新是第一动力”。要基于高质量发展全局,聚焦发展新质生产力的基本要素,将教育、科技、人才一体化统筹部署,系统推进教育强国、科技强国、人才强国建设。随着计算机技术的不断发展,我们要做科技人才、领军人才、高素质人才,为科技创新贡献自己的一份力量。序言

目录CONTENTSCSS变形CSS过渡CSS关键帧动画010203

01CSS变形Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenoneshorizon.

件采购汇总表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(缩放值);}缩放值可以是正数或负数。正数是缩放的比例倍数,负数是翻转元素后再缩放的比例倍数。若缩放值为一个参数,则表示宽度和高度采用同样的缩放值;若缩放值为两个参数,则分别表示宽度缩放值和高度缩放值,用逗号分隔。CSS变形

2D函数3.2D移位变形函数translate()2D移位变形函数translate()对指定的元素在二维空间内进行坐标移位,其基本语法格式如下。{transform:translate(坐标偏移值);}坐标偏移值是水平和垂直方向相对于原位置偏移的距离。若坐标偏移值设一个参数,则表示设置水平偏移值,而垂直偏移值默认为0;若坐标偏移值设两个参数,则分别表示水平和垂直方向偏移值,用逗号分隔。正数表示向右或向下,负数表示向左或向上。4.2D倾斜变形函数skew()2D倾斜变形函数skew()对指定的元素在二维空间内进行倾斜显示,其基本语法格式如下。{transform:skew(倾斜值);}CSS变形

2D函数倾斜值是相对于坐标轴倾斜的角度。若倾斜值设一个参数,则表示相对于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轴移动值)CSS变形

件采购汇总表CSS变形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坐标,