HTML+CSS+JavaScript网页设计-第9章-高级CSS操控课件.ppt

1、HTML+CSS+JavaScript网页设计第9章高级CSS操控第1页第第9章高级章高级CSS操控操控本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第9章高级CSS操控第2页本章概述本章概述l除了美观的字体，好看的背景、恰当的边框和边距以及酷除了美观的字体，好看的背景、恰当的边框和边距以及酷炫的图形和动画都是网页受欢迎的重要因素，动画和用户炫的图形和动画都是网页受欢迎的重要因素，动画和用户界面效果曾有很长一段时间是界面效果曾有很长一段时间是Flash具有感染力的重头戏具有感染力的重头戏，而，而CSS 3将创建这些效果的能力内置于将创建这些效果的能力内置于CSS

2、变形、变换变形、变换和动画规范当中。现在只要使用和动画规范当中。现在只要使用CSS就可以很容易的添加就可以很容易的添加各种优秀的视觉效果。本章将继续学习如何使用各种优秀的视觉效果。本章将继续学习如何使用CSS控制控制HTML网页的呈现。包括设置元素背景、边框和边距、元网页的呈现。包括设置元素背景、边框和边距、元素的变形处理以及素的变形处理以及CSS动画。通过本章的学习读者应进一动画。通过本章的学习读者应进一步熟悉步熟悉CSS的语法规则，掌握更高级的的语法规则，掌握更高级的CSS操控，能够制操控，能够制作更丰富多彩的网页动画效果。作更丰富多彩的网页动画效果。HTML+CSS+JavaScript

3、网页设计第9章高级CSS操控第3页本章的学习目标本章的学习目标l掌握设置元素背景的掌握设置元素背景的CSS属性属性l了解盒子模型的基本概念了解盒子模型的基本概念l掌握元素边框属性的设置掌握元素边框属性的设置l理解内边距和外边距的含义理解内边距和外边距的含义l掌握掌握box-shadow属性的用法属性的用法l掌握掌握CSS 3新增了新增了transform属性的用法属性的用法l掌握掌握CSS中的过渡动画的实现中的过渡动画的实现l掌握掌握CSS关键帧动画的原理和用法关键帧动画的原理和用法HTML+CSS+JavaScript网页设计第9章高级CSS操控第4页主要内容主要内容9.1 设置元素的背景设

4、置元素的背景9.2 边框与边距边框与边距9.3 变形处理变形处理9.4 设计动画设计动画9.5 本章小结本章小结9.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第5页9.1 设置元素的背景设置元素的背景l为了方便、灵活地设计网页效果，为了方便、灵活地设计网页效果，CSS 3增强了增强了background属性的功能，允许在同一个元素内属性的功能，允许在同一个元素内叠加多个背景图像。该属性的基本语法如下：叠加多个背景图像。该属性的基本语法如下：background:,*;l表示一个背景图像层。每个背景图像表示一个背景图像层。每个背景图像层都可以包含下

5、面的值：层都可以包含下面的值：background-color|background-image|background-position|background-size|background-repeat|background-origin|background-clip|background-attachment HTML+CSS+JavaScript网页设计第9章高级CSS操控第6页background-color属性属性lbackground-color属性能够为任何元素背属性能够为任何元素背景指定一个单一实体色。该属性的值与景指定一个单一实体色。该属性的值与8.2.1节介绍的节介绍的c

6、olor属性值一样，可以有多属性值一样，可以有多种模式。种模式。l当为当为元素设置元素设置background-color属性时，它将影响整个文档。而当其用于属性时，它将影响整个文档。而当其用于任何其他元素时，则会把指定的颜色用于任何其他元素时，则会把指定的颜色用于为该元素创建的盒子边框内。前面的很多为该元素创建的盒子边框内。前面的很多示例中就曾使用过该属性，这里不再赘述示例中就曾使用过该属性，这里不再赘述。HTML+CSS+JavaScript网页设计第9章高级CSS操控第7页background-image属性属性lbackground-image属性用于为元素设置背景图属性用于为元素设置

7、背景图像。元素的背景占据元素的全部尺寸，包括内边像。元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边距。默认情况下，背景距和边框，但不包括外边距。默认情况下，背景图像位于元素的左上角，并在水平和垂直方向上图像位于元素的左上角，并在水平和垂直方向上重复。重复。lbackground-image属性会在元素的背景中设置属性会在元素的背景中设置一幅图像。根据一幅图像。根据background-repeat属性的值，属性的值，图像可以无限平铺、沿着某个轴图像可以无限平铺、沿着某个轴(X轴或轴或Y轴轴)平铺平铺，或者根本不平铺。初始背景图像根据，或者根本不平铺。初始背景图像根据backgro

8、und-position属性的值放置。属性的值放置。HTML+CSS+JavaScript网页设计第9章高级CSS操控第8页background-position属性属性lbackground-position属性用于设置背景属性用于设置背景图像图像(由由background-image属性定义属性定义)的起的起始位置，背景图像如果要重复，将从这一始位置，背景图像如果要重复，将从这一位置开始。位置开始。HTML+CSS+JavaScript网页设计第9章高级CSS操控background-size属性属性lbackground-size属性用于控制背景图像的尺寸，这是属性用于控制背景图像的尺寸

9、，这是CSS 3引入的新属性，在未引入的新属性，在未CSS 3之前，无法控制背景图之前，无法控制背景图像的尺寸，只能事先把背景图像剪裁为适合的大小。像的尺寸，只能事先把背景图像剪裁为适合的大小。length：设置背景图像的高度和宽度，包括两个值，第一个值：设置背景图像的高度和宽度，包括两个值，第一个值设置宽度，第二个值设置高度；如果只设置一个值，第二个值会设置宽度，第二个值设置高度；如果只设置一个值，第二个值会被设置为被设置为auto。percentage：以父元素的百分比来设置背景图像的宽度和高度：以父元素的百分比来设置背景图像的宽度和高度，包括两个百分比数值，第一个值设置宽度，第二个值设置

10、高度，包括两个百分比数值，第一个值设置宽度，第二个值设置高度；如果只设置一个值，第二个值会被设置为；如果只设置一个值，第二个值会被设置为auto。cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景区域内。区域。背景图像的某些部分也许无法显示在背景区域内。contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。适应内容区域。第9页HTML+CSS+JavaScript网页设计第9章高级CSS操控background-origin

11、属性属性lbackground-origin属性规定属性规定background-position属性相对于什么位置来定位。如属性相对于什么位置来定位。如果背景图像的果背景图像的background-attachment属属性为性为fixed，那么该属性不生效。，那么该属性不生效。padding-box指定背景图像相对于内边距框来指定背景图像相对于内边距框来定位定位border-box指定背景图像相对于边框盒来定指定背景图像相对于边框盒来定位位content-box指定背景图像相对于内容框来定指定背景图像相对于内容框来定位位第10页HTML+CSS+JavaScript网页设计第9章高级CSS

12、操控background-repeat属性属性lbackground-repeat属性规定了图像的平属性规定了图像的平铺模式。该属性设置是否以及如何重复背铺模式。该属性设置是否以及如何重复背景图像。景图像。repeat：默认。背景图像将在垂直方向和水平方向上：默认。背景图像将在垂直方向和水平方向上重复。重复。repeat-x：背景图像将在水平方向上重复。：背景图像将在水平方向上重复。repeat-y：背景图像将在垂直方向上重复。：背景图像将在垂直方向上重复。no-repeat：背景图像将仅显示一次。：背景图像将仅显示一次。第11页HTML+CSS+JavaScript网页设计第9章高级CSS操

13、控background-clip属性属性lbackground-clip属性用于规定背景的绘制属性用于规定背景的绘制区域。该属性的可取值与区域。该属性的可取值与background-orign属性的可取值相同。表示背景图像被属性的可取值相同。表示背景图像被剪裁到相应的边框处。剪裁到相应的边框处。第12页HTML+CSS+JavaScript网页设计第9章高级CSS操控background-attachment属性属性lbackground-attachment属性用于设置背属性用于设置背景图像是否固定或随着页面的其余部分滚景图像是否固定或随着页面的其余部分滚动。该属性有两种取值：动。该属性有两

14、种取值：scroll：默认值，背景图像会随着页面其余部：默认值，背景图像会随着页面其余部分的滚动而移动；分的滚动而移动；fixed：当页面的其余部分滚动时，背景图像：当页面的其余部分滚动时，背景图像不会移动。不会移动。第13页HTML+CSS+JavaScript网页设计第9章高级CSS操控第14页主要内容主要内容9.1 设置元素的背景设置元素的背景9.2 边框与边距边框与边距9.3 变形处理变形处理9.4 设计动画设计动画9.5 本章小结本章小结9.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控9.2 边框与边距边框与边距l默认情况下，默认情况下，

15、HTML中的很多元素都是没有中的很多元素都是没有边框的，有的时候，为了使页面布局更美边框的，有的时候，为了使页面布局更美观，需要为元素添加合适的边框，并调整观，需要为元素添加合适的边框，并调整元素内容到边框的距离。元素内容到边框的距离。第15页HTML+CSS+JavaScript网页设计第9章高级CSS操控第16页盒子模型盒子模型l“盒子模型盒子模型”(box model)是是CSS中一个很重要中一个很重要的概念，因为它决定了元素在浏览器窗口中如何的概念，因为它决定了元素在浏览器窗口中如何定位。其因定位。其因CSS处理每个元素都好像元素位于一处理每个元素都好像元素位于一个盒子中而得名。个盒子

16、中而得名。lCSS盒模型本质上是一个盒子，封装周围的盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实元素，它包括：边距，边框，填充，和实际内容。际内容。l盒模型允许我们在其它元素和周围元素边框之间盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。每个盒子都有的空间放置元素。每个盒子都有3个重要的属性个重要的属性，HTML+CSS+JavaScript网页设计第9章高级CSS操控第17页border属性属性lborder属性用来指定代表某一元素的盒子属性用来指定代表某一元素的盒子的边框应如何呈现。一个边框具有的边框应如何呈现。一个边框具有3个可以个可以修改的

17、属性：修改的属性：border-color属性：指定边框应具有的颜色属性：指定边框应具有的颜色 border-style属性：指定边框应为实线、虚线属性：指定边框应为实线、虚线还是双股线，或者其他可能的取值还是双股线，或者其他可能的取值 borer-width属性：指定边框应具有的宽度属性：指定边框应具有的宽度HTML+CSS+JavaScript网页设计第9章高级CSS操控第18页padding属性属性lpadding属性用来指定元素内容与边框之间的距离，也叫做属性用来指定元素内容与边框之间的距离，也叫做内边距。该属性的值通常使用像素指定，也可以使用任何之内边距。该属性的值通常使用像素指定，

18、也可以使用任何之前介绍过的长度单位、百分比或关键字前介绍过的长度单位、百分比或关键字inherit。l如果使用了百分比，则以包含盒子的百分比计算，如果指定如果使用了百分比，则以包含盒子的百分比计算，如果指定为为10%，则每一边取盒子的，则每一边取盒子的5%作为内边距。作为内边距。l元素的内边距默认不会继承，因此如果元素的内边距默认不会继承，因此如果元素有一个元素有一个值为值为50像素的像素的padding属性，它不会自动应用于其内部的所属性，它不会自动应用于其内部的所有其他元素。只有有其他元素。只有padding属性值为属性值为inherit的元素才会继承的元素才会继承父元素的内边距。父元素的

19、内边距。l与边框一样，也可以使用如下属性分别指定盒子内每一边的与边框一样，也可以使用如下属性分别指定盒子内每一边的不同内边距大小：不同内边距大小：padding-bottom、padding-top、padding-left和和padding-right。HTML+CSS+JavaScript网页设计第9章高级CSS操控第19页margin属性属性lmargin属性用来控制盒子之间的空间。它的属性用来控制盒子之间的空间。它的取值可以是长度、百分比或者取值可以是长度、百分比或者inherit，取值，取值的含义与的含义与padding属性完全相同。属性完全相同。l也可以使用如下属性为盒子的每一边分

20、别设也可以使用如下属性为盒子的每一边分别设置不同的外边距大小：置不同的外边距大小：margin-bottom、margin-top、margin-left和和margin-right。HTML+CSS+JavaScript网页设计第9章高级CSS操控第20页border-radius属性属性l为了美化网页，经常会将元素的边框设计为圆角矩为了美化网页，经常会将元素的边框设计为圆角矩形。在形。在CSS 2.1中，为元素实现圆角边框效果是很中，为元素实现圆角边框效果是很头疼的一件事。为了简化这一功能，头疼的一件事。为了简化这一功能，CSS 3引入了引入了一个新的属性：一个新的属性：border-ra

21、dius。l和前几个属性类似，可以使用和前几个属性类似，可以使用border-radius属性属性分别设置分别设置4个角的圆角效果的半径，也可以为每个个角的圆角效果的半径，也可以为每个角单独设置，对应的角单独设置，对应的4个属性分别是：个属性分别是：border-top-left-radius(左上角左上角)、border-top-right-radius(右右上角上角)、border-bottom-right-radius(右下角右下角)和和 border-bottom-left-radius(左下角左下角)。HTML+CSS+JavaScript网页设计第9章高级CSS操控第21页bord

22、er-radius属性属性l一个值：所有四个角都有相同的半径。一个值：所有四个角都有相同的半径。l两个值：第一个值是左上角和右下角，第两个值：第一个值是左上角和右下角，第二个值是右上角和左下角。二个值是右上角和左下角。l三个值：第一个值是左上角，第二个值是三个值：第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角。右上角和左下角，第三个值是右下角。l四个值：依次是左上角、右上角、右下角四个值：依次是左上角、右上角、右下角和左下角。和左下角。HTML+CSS+JavaScript网页设计第9章高级CSS操控第22页border-image属性属性lCSS 3引入了引入了border-i

23、mage属性来为边框添加背景图片。属性来为边框添加背景图片。l边框图像可以由单幅图像创建，该图像可以在元素周边的边边框图像可以由单幅图像创建，该图像可以在元素周边的边框中沿着不同的轴向进行裁切或拉伸，换句话说，图像被框中沿着不同的轴向进行裁切或拉伸，换句话说，图像被4条线分成条线分成9个切片，如图个切片，如图9-7所示。所示。l4个角切片用于创建元素边框的个角切片用于创建元素边框的4个角，剩下的个角，剩下的4个边切片由个边切片由border-image用来填充元素边框的用来填充元素边框的4条边。然后可以指定切条边。然后可以指定切片的宽度以及是否希望这些切片平铺或拉伸以填满元素边的片的宽度以及是

24、否希望这些切片平铺或拉伸以填满元素边的全部长度上。如果中间的切片不为空，就会填充全部长度上。如果中间的切片不为空，就会填充border-image所应用的元素的背景。所应用的元素的背景。HTML+CSS+JavaScript网页设计第9章高级CSS操控第23页border-image属性属性l 前面提到的边框平铺方式有前面提到的边框平铺方式有4个选项，我们可以针对平铺指个选项，我们可以针对平铺指定两个值：第一个值用于水平方向的边框，第二个值用于垂定两个值：第一个值用于水平方向的边框，第二个值用于垂直方向的边框。这直方向的边框。这4个选项的含义如下：个选项的含义如下：round：图像会进行平铺，

25、直至填满整个区域。如果平：图像会进行平铺，直至填满整个区域。如果平铺之后切片的数目与区域不匹配，就会对图像进行相应铺之后切片的数目与区域不匹配，就会对图像进行相应的缩放。的缩放。stretch：图像会被拉伸，直至填满整个区域。：图像会被拉伸，直至填满整个区域。repeat：图像会进行平铺，直至填满整个区域。：图像会进行平铺，直至填满整个区域。space：图像会进行平铺，直至填满整个区域。如果平：图像会进行平铺，直至填满整个区域。如果平铺之后切片的数目与区域不匹配，就会调整图像之间的铺之后切片的数目与区域不匹配，就会调整图像之间的间距以填满整个区域。间距以填满整个区域。HTML+CSS+Java

26、Script网页设计第9章高级CSS操控box-shadow属性属性lbox-shadow属性也是属性也是CSS 3新增的属性，新增的属性，box-shadow属性有点类似于上一章学习的属性有点类似于上一章学习的text-shadow属性，属性，text-shadow属性是为文本设置阴属性是为文本设置阴影，而影，而box-shadow属性是为对象实现图层阴影属性是为对象实现图层阴影效果。效果。ltext-shadow属性一样，属性一样，box-shadow也可以使也可以使用一个或多个投影。使用多个投影时，属性值是用一个或多个投影。使用多个投影时，属性值是一个用逗号分隔阴影的列表，每个阴影由一个

27、用逗号分隔阴影的列表，每个阴影由2-4个长个长度值、一个可选的颜色值和一个可选的度值、一个可选的颜色值和一个可选的inset关键关键字来规定，省略长度的值是字来规定，省略长度的值是 0。第24页HTML+CSS+JavaScript网页设计第9章高级CSS操控第25页主要内容主要内容9.1 设置元素的背景设置元素的背景9.2 边框与边距边框与边距9.3 变形处理变形处理9.4 设计动画设计动画9.5 本章小结本章小结9.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第26页9.3 变形处理变形处理lCSS 3新增了新增了transform属性，可以实

28、现文属性，可以实现文字或图像的变形操作，主要包括旋转、倾字或图像的变形操作，主要包括旋转、倾斜、缩放和移动斜、缩放和移动4种类型的变形处理。该属种类型的变形处理。该属性接受一个或者多个由空格分隔的应用于性接受一个或者多个由空格分隔的应用于元素的变形函数元素的变形函数HTML+CSS+JavaScript网页设计第9章高级CSS操控第27页旋转旋转l旋转通过旋转通过rotate函数来实现，在旋转之前可以使用函数来实现，在旋转之前可以使用transform-origin属性定义旋转的基点。属性定义旋转的基点。rotate()的参数的参数是旋转角度，可以是正值或负值，设置为正值，表示顺时是旋转角度，

29、可以是正值或负值，设置为正值，表示顺时针旋转；设置为负值，表示逆时针旋转。针旋转；设置为负值，表示逆时针旋转。l在三维变形中，还有在三维变形中，还有3个旋转函数：个旋转函数：rotateX()、rotateY()和和rotateZ()，可以让元素在任何轴上旋转。，可以让元素在任何轴上旋转。rotateX()函函数允许元素围绕数允许元素围绕X轴旋转；轴旋转；rotateY()函数允许元素围绕函数允许元素围绕Y轴旋转；轴旋转；rotateZ()函数允许元素围绕函数允许元素围绕Z轴旋转。这轴旋转。这3个函个函数的参数也是旋转的角度，同样，为正值，元素围绕相应数的参数也是旋转的角度，同样，为正值，元素

30、围绕相应的轴顺时针旋转；为负值，逆时针旋转。的轴顺时针旋转；为负值，逆时针旋转。HTML+CSS+JavaScript网页设计第9章高级CSS操控第28页旋转旋转lrotateX()、rotateY()和和rotateZ()可以看可以看成是成是rotate3d()函数的一个特例：函数的一个特例：rotateX(a)函数的功能等同于函数的功能等同于rotate3d(1,0,0,a)；rotateY(a)函数的功能函数的功能等同于等同于rotate3d(0,1,0,a)；rotateZ(a)函数函数的功能等同于的功能等同于rotate3d(0,0,1,a)HTML+CSS+JavaScript网页

31、设计第9章高级CSS操控第29页倾斜倾斜l倾斜也叫扭曲，通过倾斜也叫扭曲，通过skew函数来实现。函数来实现。skew函数可以带一个或两个参数，只有一函数可以带一个或两个参数，只有一个参数的个参数的skew函数会使元素在水平方向上函数会使元素在水平方向上(X轴轴)扭曲，如果有第二个参数的话，那么扭曲，如果有第二个参数的话，那么第二个值控制元素在垂直方向上第二个值控制元素在垂直方向上(Y轴轴)扭曲扭曲。另外两个函数。另外两个函数skewX()和和skewY()则分别则分别使元素仅在水平方向扭曲和仅在垂直方向使元素仅在水平方向扭曲和仅在垂直方向扭曲。扭曲。HTML+CSS+JavaScript网页

32、设计第9章高级CSS操控第30页缩放缩放l对元素的缩放通过对元素的缩放通过scale()函数来实现。它接受无单位的数函数来实现。它接受无单位的数字为参数，字为参数，scale(1)就是元素的默认尺寸。小于就是元素的默认尺寸。小于1的值使的值使元素变小，所以元素变小，所以scale(0.5)将元素的尺寸缩小为原来的一将元素的尺寸缩小为原来的一半，相反，大于半，相反，大于1的值使元素变大，所以的值使元素变大，所以scale(2)将元素将元素的尺寸放大到原来的两倍。如果参数值为负，则进行反转的尺寸放大到原来的两倍。如果参数值为负，则进行反转。l也可以指定两个参数也可以指定两个参数scale(x,y)

33、，使元素在水平方向和垂，使元素在水平方向和垂直方向同时缩放直方向同时缩放(也就是也就是X轴和轴和Y轴同时缩放轴同时缩放)；或者使用；或者使用scaleX(x)函数，仅在水平方向缩放，函数，仅在水平方向缩放，scaleY(y)仅在垂直仅在垂直方向缩放，它们具有相同的缩放中心点和基数，其中心点方向缩放，它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为就是元素的中心位置，缩放基数为1。HTML+CSS+JavaScript网页设计第9章高级CSS操控第31页3D缩放缩放l对于元素的对于元素的3D缩放，还有缩放，还有scaleZ(sz)和和scale3d(sx,sy,sz)两个函

34、数。当两个函数。当scale3d()中的中的X轴和轴和Y轴同时为轴同时为1(即即scale3d(1,1,sz)时，其效果等同于时，其效果等同于scaleZ(sz)。lscaleZ()和和scale3d()函数单独使用时没有函数单独使用时没有任何效果，需要配合其他变形函数一起使任何效果，需要配合其他变形函数一起使用才会有效果。用才会有效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第32页移动移动l元素的移动通过元素的移动通过translate函数来实现，元函数来实现，元素从其当前位置移动，根据给定的位置参素从其当前位置移动，根据给定的位置参数数(x 坐标和坐标和y 坐标

35、坐标)沿着沿着X轴、轴、Y轴移动。轴移动。也可有使用也可有使用translateX(x)仅在水平方向移仅在水平方向移动动(X轴移动轴移动)；或者使用；或者使用translateY(Y)仅在仅在垂直方向移动垂直方向移动(Y轴移动轴移动)。另外，还有。另外，还有translateZ()和和translate3d()两个函数用两个函数用于元素的于元素的3D位移操作。位移操作。HTML+CSS+JavaScript网页设计第9章高级CSS操控第33页移动移动l3D位移处理的特点是：使用三维向量的坐标定义位移处理的特点是：使用三维向量的坐标定义元素在每个方向移动多少。在元素在每个方向移动多少。在tran

36、slate3d()函数函数中，中，X、Y、Z轴上的变化规律是：轴上的变化规律是：X轴：从左向右移动轴：从左向右移动 Y轴：从上向下移动轴：从上向下移动 Z轴：以方框中心为原点变大轴：以方框中心为原点变大l当当Z轴的值越大时，元素离观看者越近，从视觉轴的值越大时，元素离观看者越近，从视觉上元素就变得更大；反之，值越小时，元素也离上元素就变得更大；反之，值越小时，元素也离观看者更远，从视觉上元素就变得更小。观看者更远，从视觉上元素就变得更小。HTML+CSS+JavaScript网页设计第9章高级CSS操控第34页主要内容主要内容9.1 设置元素的背景设置元素的背景9.2 边框与边距边框与边距9.

37、3 变形处理变形处理9.4 设计动画设计动画9.5 本章小结本章小结9.6 思考和练习思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第35页9.4 设计动画设计动画l一些一些 CSS 属性是可以有动画效果的，这意味着属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。、百分比和颜色。CSS 3中的动画功能主要包括中的动画功能主要包括Transitions和和Animations，这两种功能都可以，这两种

38、功能都可以用来制作动画效果。其中，用来制作动画效果。其中，Transitions功能支持功能支持从一个属性值平滑过渡到另一个属性值，方便用从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；来制作颜色渐变和形状渐变动画；Animations功功能支持通过对关键帧的指定来在页面上产生更复能支持通过对关键帧的指定来在页面上产生更复杂的动画效果，以方便制作逐帧动画。杂的动画效果，以方便制作逐帧动画。HTML+CSS+JavaScript网页设计第9章高级CSS操控第36页过渡动画过渡动画lCSS Transformation呈现的是一种变形效果，而呈现的是一种变形效果，而CSS

39、Transition呈现的是一种过渡效果，就是一种动画转呈现的是一种过渡效果，就是一种动画转换过程，如渐显、渐弱、动画快慢等。换过程，如渐显、渐弱、动画快慢等。CSS Transformation和和CSS Transition是两种不同的动画模是两种不同的动画模型，因此，型，因此，W3C为动画过渡定义了单独的模块。为动画过渡定义了单独的模块。lW3C标准中对标准中对CSS3 Transition是这样描述的：是这样描述的：“CSS Transition允许允许CSS的属性值在一定的时间区间内平滑过的属性值在一定的时间区间内平滑过渡。这种效果可以在鼠标单击、获得焦点、被单击或对元渡。这种效果可

40、以在鼠标单击、获得焦点、被单击或对元素的任何改变中触发，并圆滑地以动画效果改变素的任何改变中触发，并圆滑地以动画效果改变CSS的属的属性值。性值。”HTML+CSS+JavaScript网页设计第9章高级CSS操控第37页过渡动画过渡动画l过渡可以与变形同时使用。例如，触发过渡可以与变形同时使用。例如，触发:hover或或:focus事件后创建动画过程，诸事件后创建动画过程，诸如淡出背景色、滑动一个元素以及让一个如淡出背景色、滑动一个元素以及让一个对象旋转等都可以通过对象旋转等都可以通过CSS转换来实现。转换来实现。transition-property：执行变换的属性：执行变换的属性 tra

41、nsition-duration：变换延续的时间：变换延续的时间 transition-timing-function：在延续时间段：在延续时间段，变换的速率变化，变换的速率变化 transition-delay：变换延迟时间：变换延迟时间HTML+CSS+JavaScript网页设计第9章高级CSS操控第38页定义过渡属性定义过渡属性ltransition-property属性用来定义转换动属性用来定义转换动画的画的CSS属性名称，如属性名称，如background-color属性。即指定在元素的哪个属性发生改变属性。即指定在元素的哪个属性发生改变时执行过渡效果，主要有以下几个值：时执行过渡

42、效果，主要有以下几个值：none(没有属性改变没有属性改变)；all(所有属性改变所有属性改变)，这也是默认值；这也是默认值；indent(元素属性名元素属性名)。当值。当值为为none时，过渡马上停止执行。当值为时，过渡马上停止执行。当值为all时，元素产生任何属性值变化时都执行过时，元素产生任何属性值变化时都执行过渡效果。渡效果。indent可以是指定元素的某个属可以是指定元素的某个属性值性值HTML+CSS+JavaScript网页设计第9章高级CSS操控第39页定义过渡属性定义过渡属性l具体什么属性可以实现过渡效果，在具体什么属性可以实现过渡效果，在W3C官网上列出了所有可以实现过渡效

43、果的官网上列出了所有可以实现过渡效果的CSS属性值以及值的类型，大家可以到官属性值以及值的类型，大家可以到官网了解详情。需要注意的是，并不是所有网了解详情。需要注意的是，并不是所有的属性改变都会触发过渡效果，比如页面的属性改变都会触发过渡效果，比如页面的自适应宽度，当浏览器改变宽度时，并的自适应宽度，当浏览器改变宽度时，并不会触发过渡效果。但上面所列的属性类不会触发过渡效果。但上面所列的属性类型发生改变都会触发过渡效果。型发生改变都会触发过渡效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第40页定义过渡时间定义过渡时间ltransition-duration属性用来指

44、定元素过渡属性用来指定元素过渡效果的持续时间，即设置从旧属性换到新效果的持续时间，即设置从旧属性换到新属性所花费的时间，单位为秒。属性所花费的时间，单位为秒。l该属性适用于所有元素以及该属性适用于所有元素以及:before和和:after伪元素。默认情况下，动画过渡时间为伪元素。默认情况下，动画过渡时间为0秒秒，所以【例，所以【例9-9】中看不到过渡的效果。】中看不到过渡的效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第41页定义过渡延迟时间定义过渡延迟时间ltransition-delay属性用来指定动画开始前属性用来指定动画开始前的等待时间，单位为的等待时间，单位

45、为s(秒秒)或或ms(毫秒毫秒)，也，也就是在改变元素属性值后多长时间开始执就是在改变元素属性值后多长时间开始执行过渡效果。行过渡效果。transition-delay的用法和的用法和transition-duration极其相似，也可以作用极其相似，也可以作用于所有元素，包括于所有元素，包括:before和和:after伪元素。伪元素。默认值为默认值为0，也就是变换立即执行，没有延，也就是变换立即执行，没有延迟。迟。HTML+CSS+JavaScript网页设计第9章高级CSS操控第42页定义过渡定义过渡效果效果ltransition-timing-function属性用来指定切换效果的变换

46、速率，也就属性用来指定切换效果的变换速率，也就是定义过渡动画的效果，该属性有是定义过渡动画的效果，该属性有6个可能的值：个可能的值：ease：过渡效果逐渐变慢，为默认值，：过渡效果逐渐变慢，为默认值，ease函数等同于贝塞尔曲线函数等同于贝塞尔曲线(0.25,0.1,0.25,1.0)。linear：匀速过渡效果，：匀速过渡效果，linear函数等同于贝塞尔曲线函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)。ease-in：加速过渡效果，：加速过渡效果，ease-in函数等同于贝塞尔曲线函数等同于贝塞尔曲线(0.42,0,1.0,1.0)。ease-out：减速过渡效果，：减速过渡效果

47、，ease-out函数等同于贝塞尔曲线函数等同于贝塞尔曲线(0,0,0.58,1.0)。ease-in-out：过渡效果首先是加速，然后减速，：过渡效果首先是加速，然后减速，ease-in-out函数等同函数等同于贝塞尔曲线于贝塞尔曲线(0.42,0,0.58,1.0)。cubic-bezier：允许自定义一条时间曲线，即特定的：允许自定义一条时间曲线，即特定的cubic-bezier曲线曲线。(x1,y1,x2,y2)中的中的4个值特定于曲线上的点个值特定于曲线上的点P1和点和点P2。所有值必须在。所有值必须在0,1区域内，否则无效。区域内，否则无效。HTML+CSS+JavaScript网

48、页设计第9章高级CSS操控第43页关键帧动画关键帧动画l过渡动画只能使元素产生基本的运动，过渡动画只能使元素产生基本的运动，CSS动画规范动画规范(http:/j.mp/css3-animations,http:/dev.w3.org/csswg/css3-animations/)用用基于关键帧的动画使运动效果更进一步。关键帧基于关键帧的动画使运动效果更进一步。关键帧的概念来源于传统的卡通片制作。关键帧相当于的概念来源于传统的卡通片制作。关键帧相当于二维动画中的原画。指角色或者物体运动或变化二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。用关键帧的话来说中的关键动作所处的那

49、一帧。用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。，因而能实现更复杂的动画效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第44页关键帧动画关键帧动画l关键帧动画的定义方式比较特殊，它使用关键帧动画的定义方式比较特殊，它使用了一个关键字了一个关键字keyframes 来定义动画。来定义动画。具体格式如下：具体格式如下：keyframes 动画名称动画名称 时间点时间点 元素状态元素状态 时间点时间点 元

50、素状态元素状态 l一般来说，一般来说，0%和和100%这两个关键帧是必这两个关键帧是必须要定义的。须要定义的。0%可以由可以由from代替，代替，100%可以由可以由to代替。代替。HTML+CSS+JavaScript网页设计第9章高级CSS操控第45页关键帧动画关键帧动画l每一个关键帧规则的开始都是一个百分比每一个关键帧规则的开始都是一个百分比值或者值或者from(相当于相当于0%)与与to(相当于相当于100%)这两个关键字之一，它指定了关键帧在动这两个关键字之一，它指定了关键帧在动画的何处出现。百分比值表示动画持续时画的何处出现。百分比值表示动画持续时间的百分比，所以一段间的百分比，所