HTML5+CSS3网页设计基础 第十章 CSS3简单动画

HTML5+CSS3网页设计基础第10章CSS3简单动画第1页第10章CSS3简单动画本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础第10章CSS3简单动画第2页本章概述在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。本章将对CSS3中的过渡、变形和动画进行详细讲解。HTML5+CSS3网页设计基础第10章CSS3简单动画第3页本章的学习目标理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。掌握CSS3中的变形属性，能够实现2D转换、3D转换效果。掌握CSS3中的动画技术，能够制作网页中常见的动画效果。HTML5+CSS3网页设计基础第10章CSS3简单动画第4页主要内容10.1CSS3过渡10.2变形10.3动画设计10.4实训10.5本章小结HTML5+CSS3网页设计基础第10章CSS3简单动画第5页10.1CSS3过渡本节主要内容：transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition属性HTML5+CSS3网页设计基础第10章CSS3简单动画10.1.1transition-property属性transition-property属性用于指定应用过渡效果的CSS属性名称，默认值为all。其基本语法格式如下。transition-property：none|all|property;none：没有属性会获得过渡效果。all：所有属性都将获得过渡效果。property：定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。第6页HTML5+CSS3网页设计基础第10章CSS3简单动画第7页10.1.2transition-duration属性transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms），其基本语法格式如下。transition-duration:time;参考示例：例10-1-2.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第8页10.1.3transition-timing-function属性transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease”，其基本语法格式如下。transition-timing-function:linear|ease|ease-in|ease-in-out;各参数的意义如下。linear：指定以相同速度开始至结束的过渡效果。ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果ease-in：指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果。ease-out：指定以慢速结束（淡出效果）的过渡效果。ease-in-out：指定以慢速开始和结束的过渡效果。参考示例：例10-1-3.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第9页10.1.4transition-delay属性transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下。transition-delay:time;参考示例：例10-1-4.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第10页10.1.5transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下。transition：propertydurationtiming-functiondelay;在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。如例10-1-4中设置的四个过渡属性，可以直接通过如下代码实现。transition:width,height2sease-out1s;HTML5+CSS3网页设计基础第10章CSS3简单动画第11页10.2变形本节主要内容：案例展示认识transform2D转换3D转换案例实现HTML5+CSS3网页设计基础第10章CSS3简单动画第12页10.2.1案例展示【案例展示】设计客户案例局部页面，实现当鼠标悬浮于图片上时，介绍文字从图片上方滑下覆盖图片，文字半透明，能看到后面的图片。本例文件10-2.HTML在浏览器中的浏览效果如图10-3和10-4所示。图10-3客户案例局部页面10-4鼠标悬浮于图片上时效果HTML5+CSS3网页设计基础第10章CSS3简单动画第13页10.2.1案例展示【知识要点】CSS3中transform属性、2D及3D转换。【学习目标】掌握transform属性、2D、3D转换技术，实现移动、倾斜、缩放以及翻转元素等效果。HTML5+CSS3网页设计基础第10章CSS3简单动画第14页10.2.2认识transformCSS3变形是一系列效果的集合，如平移、旋转、缩放和倾斜等，这些的基础都是transform属性。CSS3中的变形允许动态的控制元素，可以在网页中对元素进行移动、缩放、倾斜、旋转，或者结合这些变形属性产生复杂的动画。通过CSS3中的变形操作，可以让元素生成动态视觉效果，也可以结合过渡和动画属性产生一些新的动画效果。CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。transform属性的基本语法如下。transform:none|transform-functions;HTML5+CSS3网页设计基础第10章CSS3简单动画第15页10.2.2认识transform参数说明：none：表示不进行变形。transform-functions：用于设置变形函数，可以是一个或多个变形函数列表。transform-function函数包括translate()、scale()、rotate()和skew()等。具体说明如下。translate()：移动元素对象，即基于X和Y坐标重新定位元素。scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。rotate()：旋转元素对象，取值为一个度数值。skew()：倾斜元素对象，取值为一个度数值。HTML5+CSS3网页设计基础第10章CSS3简单动画第16页10.2.32D转换1.平移使用translate()方法实现平移效果，使元素从其当前位置平移，移动距离根据给定的left（x坐标）和top（y坐标）位置参数进行。该函数包含两个参数值，分别用于定义X轴和Y轴坐标，其基本语法格式如下。transform:translate(x-value,y-value);参数说明：x-value指元素在水平方向上移动的距离。y-value指元素在垂直方向上移动的距离。参考示例：例10-2-1.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第17页10.2.32D转换2.缩放scale()方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。元素尺寸的增加或减少，由定义的宽度（X轴）和高度（Y轴）参数控制，其基本语法格式如下。transform:scale(x-axis,y-axis);参数说明：x-axis：元素沿x轴方向上的缩放比例。y-axis：元素沿x轴方向上的缩放比例。参考示例：例10-2-2.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第18页10.2.32D转换3.倾斜skew()方法用于元素倾斜显示，即将一个对象围绕着X轴和Y轴按照一定的角度倾斜。该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。其基本语法格式如下。transform:skew(x-angle,y-angle);参数说明：x-angle：相对于X轴进行倾斜的角度值，单位deg。y-angle：相对于Y轴进行倾斜的角度值，单位deg。说明：如果省略了第二个参数，则取默认值0。参考示例：例10-2-3.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第19页10.2.32D转换4.旋转rotate()方法用于旋转指定的元素，它通过指定的角度参数使元素相对原点中心进行旋转。其基本语法格式如下。transform:rotate(angle);参数说明：angle表示要旋转的角度值。如果角度为正数值，则顺时针旋转，否则，逆时针旋转。参考示例：例10-2-4.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第20页10.2.32D转换5.更改变换的中心点transform-origin()方法用来设置元素的运动的基点(参照点)，也就是该元素围绕着那个点变形或旋转，默认基点是元素的中心点。在不使用transform-origin()改变元素基点位置的情况下，transform进行的translate、scale、skew、rotate等操作都是以元素自己中心位置进行变化的。如果需要在不同的位置对元素进行这些操作，就可以使用transform-origin来对元素进行基点位置改变，使元素基点不再在中心位置，以达到需要的基点位置。HTML5+CSS3网页设计基础第10章CSS3简单动画第21页10.2.32D转换基本语法格式如下。transform-origin：x-axisy-axisz-axis;参数说明：x-axis：定义视图被置于X轴的何处。取值left、center、right、length和%等，默认值为50%。y-axis：定义视图被置于Y轴的何处。取值top、center、bottom、length和%等，默认值为50%。z-axis：定义视图被置于Z轴的何处。取值length，默认值为0。注意：该属性只有在设置了transform属性的时候起作用，2D转换元素可以改变元素的X和Y轴。3D转换元素，还可以更改元素的Z轴。参考示例：例10-2-5.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第22页10.2.43D转换1.rotateX()方法rotateX()函数用于指定元素围绕X轴旋转，其基本语法格式如下。transform:rotateX(a);参数说明：参数a用于定义旋转的角度值，单位为deg。其值可以使正数也可以是负数。如果只为正，元素将围绕X轴顺时针旋转；反之，如果是负值，元素将围绕X轴逆时针旋转。参考示例：例10-2-6.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第23页10.2.43D转换2.rotateY()方法rotateY()函数指定一个元素围绕Y轴旋转，其基本语法格式如下。transform:rotateY(a);参数说明：参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。参考示例：例10-2-7.htmlHTML5+CSS3网页设计基础第10章CSS3简单动画第24页10.2.43D转换3.perspective属性perspective属性定义3D元素距视图的距离，以像素计。该属性能改变3D元素查看3D