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

1、第1页第10章 CSS3简单动画本章概述 本章的学习目标主要内容第2页本章概述在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。本章将对CSS3中的过渡、变形和动画进行详细讲解。第3页本章的学习目标理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。掌握CSS3中的变形属性，能够实现2D转换、3D转换效果。掌握CSS3中的动画技术，能够制作网页中常见的动画效果。第4页主要内容10.1 CSS3过渡10.2 变形10.3 动画设计10.4 实训10.5 本章小结

2、第5页10.1 CSS3过渡本节主要内容：transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition属性10.1.1 transition-property属性transition-property属性用于指定应用过渡效果的CSS属性名称，默认值为all。其基本语法格式如下。transition-property：none | all | property;none：没有属性会获得过渡效果。all：所有属性都将获得过渡效果。property：定义应用过渡效果

3、的CSS属性名称，多个名称之间以逗号分隔。第6页第7页10.1.2 transition-duration属性transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms），其基本语法格式如下。transition-duration:time;参考示例：例10-1-2.html第8页10.1.3 transition-timing-function属性transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease”，其基本语法格式如下。transition-timing-function:linear|e

4、ase|ease-in|ease-in-out;各参数的意义如下。linear：指定以相同速度开始至结束的过渡效果。ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果ease-in：指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果。ease-out：指定以慢速结束（淡出效果）的过渡效果。ease-in-out：指定以慢速开始和结束的过渡效果。参考示例：例10-1-3.html第9页10.1.4 transition-delay属性transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay的属性值可以为正整

5、数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下。transition-delay:time;参考示例：例10-1-4.html第10页10.1.5 transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下。transition：property duration timing-functio

6、n delay;在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。如例10-1-4中设置的四个过渡属性，可以直接通过如下代码实现。transition:width,height 2s ease-out 1s;第11页10.2 变形本节主要内容：案例展示认识transform2D转换3D转换案例实现第12页10.2.1 案例展示【案例展示】设计客户案例局部页面，实现当鼠标悬浮于图片上时，介绍文字从图片上方滑下覆盖图片，文字半透明，能看到后面的图片。本例文件10-2.HTML在浏览器中的浏览效果如图10-3和10-4所示。 图10-3 客户案例局部页面

7、10-4 鼠标悬浮于图片上时效果第13页10.2.1 案例展示【知识要点】CSS3中transform属性、2D及3D转换。【学习目标】掌握transform属性、2D、3D转换技术，实现移动、倾斜、缩放以及翻转元素等效果。第14页10.2.2 认识transformCSS3变形是一系列效果的集合，如平移、旋转、缩放和倾斜等，这些的基础都是transform属性。CSS3中的变形允许动态的控制元素，可以在网页中对元素进行移动、缩放、倾斜、旋转，或者结合这些变形属性产生复杂的动画。通过CSS3中的变形操作，可以让元素生成动态视觉效果，也可以结合过渡和动画属性产生一些新的动画效果。CSS3的变形（

8、transform）属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。transform属性的基本语法如下。transform: none | transform-functions;第15页10.2.2 认识transform参数说明：none：表示不进行变形。transform-functions：用于设置变形函数，可以是一个或多个变形函数列表。transform-function函数包括translate()、scale()、rotate()和skew()等。具体说明如下。translate()：移动元素对象，即基于X和Y坐标重新定位元素。s

9、cale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。rotate()：旋转元素对象，取值为一个度数值。skew()：倾斜元素对象，取值为一个度数值。第16页10.2.3 2D转换1. 平移使用translate()方法实现平移效果，使元素从其当前位置平移，移动距离根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数进行。该函数包含两个参数值，分别用于定义X轴和Y轴坐标，其基本语法格式如下。transform:translate(x-value,y-value);参数说明：x-value指元素在水平方向上移动的距离。y-value指元素在垂直方向上

10、移动的距离。参考示例：例10-2-1.html第17页10.2.3 2D转换2. 缩放scale()方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。元素尺寸的增加或减少，由定义的宽度（X轴）和高度（Y轴）参数控制，其基本语法格式如下。transform:scale(x-axis,y-axis);参数说明：x-axis：元素沿x轴方向上的缩放比例。y-axis：元素沿x轴方向上的缩放比例。参考示例：例10-2-2.html第18页10.2.3 2D转换3. 倾斜skew()方法用于元素倾斜显示，即将一个对象围绕着X轴和Y轴按照一定的角度倾斜。该函数包含两个参数值，分

11、别用来定义X轴和Y轴坐标倾斜的角度。其基本语法格式如下。transform:skew(x-angle,y-angle);参数说明：x-angle：相对于X轴进行倾斜的角度值，单位deg。y-angle：相对于Y轴进行倾斜的角度值，单位deg。说明：如果省略了第二个参数，则取默认值0。参考示例：例10-2-3.html第19页10.2.3 2D转换4. 旋转rotate()方法用于旋转指定的元素，它通过指定的角度参数使元素相对原点中心进行旋转。其基本语法格式如下。transform:rotate(angle);参数说明：angle表示要旋转的角度值。如果角度为正数值，则顺时针旋转，否则，逆时针旋

12、转。参考示例：例10-2-4.html第20页10.2.3 2D转换5. 更改变换的中心点transform-origin()方法用来设置元素的运动的基点(参照点)，也就是该元素围绕着那个点变形或旋转，默认基点是元素的中心点。在不使用transform-origin()改变元素基点位置的情况下，transform进行的translate、scale、skew、rotate等操作都是以元素自己中心位置进行变化的。如果需要在不同的位置对元素进行这些操作，就可以使用transform-origin来对元素进行基点位置改变，使元素基点不再在中心位置，以达到需要的基点位置。第21页10.2.3 2D转换

13、基本语法格式如下。transform-origin：x-axis y-axis z-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.html第22页10.2.4 3D

14、转换1. rotateX()方法rotateX()函数用于指定元素围绕X轴旋转，其基本语法格式如下。transform:rotateX(a);参数说明：参数a用于定义旋转的角度值，单位为deg。其值可以使正数也可以是负数。如果只为正，元素将围绕X轴顺时针旋转；反之，如果是负值，元素将围绕X轴逆时针旋转。参考示例：例10-2-6.html第23页10.2.4 3D转换2. rotateY()方法rotateY()函数指定一个元素围绕Y轴旋转，其基本语法格式如下。transform:rotateY(a);参数说明：参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕

15、Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。参考示例：例10-2-7.html第24页10.2.4 3D转换3. perspective属性perspective 属性定义 3D 元素距视图的距离，以像素计。该属性能改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，但元素本身没有。语法格式：perspective: number|none;参数说明：number：元素距离视图的距离，单位是像素。none：不设置透视，默认值，与 0 相同。说明：perspective 属性只影响 3D 转换元素。目前浏览器都不支持 per

16、spective 属性，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。参考示例：例10-2-8.html第25页10.2.4 3D转换4.perspective-origin属性perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴，用来改变 3D 元素的底部位置。语法格式：perspective-origin:x-axis y-axis;参数说明：x-axis：定义视图在 x 轴上的位置。取值left、center、right、length、%，默认值50%。y-axis：定义视图在 y 轴上的位置。取值top、cen

17、ter、bottom、length、%，默认值50%。说明：使用perspective -Origin属性，定义一个元素的子元素的透视图，而不是元素本身。目前浏览器都不支持 perspective-origin 属性。Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性参考示例：例10-2-9.html第26页10.2.4 3D转换5.backface-visibility属性backface-visibility 属性定义当元素不面向屏幕时是否可见。语法格式：backface-visibility: visible | hidden;参数：v

18、isible：背面是可见的，默认值。hidden：背面是不可见的。参考示例：例10-2-10.html第27页10.3 动画设计本节主要内容：keyframes规则animation属性第28页10.3.1 keyframes规则在CSS3中，keyframes定义关键帧，一个关键帧表示动画过程中的一个状态。在keyframes中规定某套CSS样式，从一套 CSS 样式逐渐变化为另一套样式的过程，就实现了动画效果。keyframes规则的语法格式如下。keyframes animationname keyframes-selectorcss-styles;参数说明：animationname：

19、动画的名称，它将作为引用时的唯一标识，不能为空。第29页10.3.1 keyframes规则keyframes-selecytor：关键帧选择器，规定当前关键帧要应用到整个动画过程中的时间，取值为百分比（百分比是指动画完成一遍的时间长度的的百分比）、from或者to。其中，from和0%效果相同，是动画的开始时间；to和100%效果相同，是动画的结束时间。css-styles：当前关键帧的CSS样式，定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。说明：目前浏览器都不支持 keyframes 规则。Firefox 支持替代的 -moz-keyframes 规则。Opera 支持替代的 -o-keyframes 规则。Safari 和 Chrome 支持替代的 -