HTML5+CSS3网页设计基础教程第16章-设计动画.ppt_163文库

资源描述

1、HTML5+CSS3网页设计基础教程第16章设计动画第1页第第16章章设计动画设计动画本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第16章设计动画第2页本章概述本章概述lCSS3中的动画功能可以用来做出在网页上运行中的动画功能可以用来做出在网页上运行的动画。的动画。CSS3中的动画功能主要包括中的动画功能主要包括Transitions和和Animations，这两种功能都可以，这两种功能都可以用来制作动画效果。其中，用来制作动画效果。其中，Transitions功能支持功能支持从一个属性值平滑过渡到另一个属性值，方便用从一个属性值平滑过渡到另一个属性值，方便用来制

2、作颜色渐变和形状渐变动画；来制作颜色渐变和形状渐变动画；Animations功功能支持通过关键帧的指定来在页面上产生更复杂能支持通过关键帧的指定来在页面上产生更复杂的动画效果，方便制作逐帧动画。的动画效果，方便制作逐帧动画。l例如，利用例如，利用Transitions功能，可以通过改变功能，可以通过改变background-color属性值来让背景色从一种颜色属性值来让背景色从一种颜色平滑过渡到另一种颜色。平滑过渡到另一种颜色。HTML5+CSS3网页设计基础教程第16章设计动画第3页本章的学习目标本章的学习目标l掌握过渡动画的制作方法，掌握过渡属性、过渡掌握过渡动画的制作方法，掌握过渡属性

3、、过渡时间、过渡延迟时间、过渡效果的设置操作。时间、过渡延迟时间、过渡效果的设置操作。l掌握掌握3D动画制作方法，掌握动画名称、动画时间、动画制作方法，掌握动画名称、动画时间、动画播放方式、动画延迟时间、动画播放次数以动画播放方式、动画延迟时间、动画播放次数以及动画播放方向的设置操作。及动画播放方向的设置操作。l掌握渐变效果制作，包括掌握渐变效果制作，包括Webkit渐变、渐变、Mozilla渐变、渐变、Opera渐变和渐变和IE渐变。渐变。l能够应用能够应用CSS3的动画功能制作具有一定综合度的动画功能制作具有一定综合度的动画效果。的动画效果。HTML5+CSS3网页设计基础教程第16章设

4、计动画第4页主要内容主要内容16.1 过渡动画过渡动画16.2 3D动画动画 16.3 渐变效果渐变效果16.4 案例综合实战案例综合实战16.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第16章设计动画第5页16.1 过渡动画过渡动画l16.1.1 定义过渡属性定义过渡属性l16.1.2 定义过渡时间定义过渡时间l16.1.3 定义过渡延迟时间定义过渡延迟时间l16.1.4 定义过渡效果定义过渡效果HTML5+CSS3网页设计基础教程第16章设计动画第6页16.1.1 定义过渡属性定义过渡属性ltransition-property属性用来定义转换动画的属性用来定义转换动画

5、的CSS属性名属性名称，如称，如background-color属性。该属性的语法格式如下：属性。该属性的语法格式如下：transition-property：none|all|,*transition-property是用来指定当元素其中一个属性改变时是用来指定当元素其中一个属性改变时执行执行transition效果，其主要有以下几个值：效果，其主要有以下几个值：none(没有属没有属性改变性改变)；all（所有属性改变）这个也是其默认值；（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为（元素属性名）。当其值为none时，时，transition马上停止执马上停止执行，

6、当指定为行，当指定为all时，则元素产生任何属性值变化时都将执时，则元素产生任何属性值变化时都将执行行transition效果，效果，ident是可以指定元素的某一个属性值。是可以指定元素的某一个属性值。HTML5+CSS3网页设计基础教程第16章设计动画第7页16.1.2 定义过渡时间定义过渡时间ltransition-duration是用来指定元素转换过程的持续时间，是用来指定元素转换过程的持续时间，即设置从旧属性换到新属性花费的时间，单位为秒。该属即设置从旧属性换到新属性花费的时间，单位为秒。该属性的语法格式如下：性的语法格式如下：transition-duration：,*l该属性的

7、初始值为该属性的初始值为0，适用于所有元素以及，适用于所有元素以及:before和和:after伪元素。在默认情况下，动画过渡时间为伪元素。在默认情况下，动画过渡时间为0秒，所秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结以当指定元素动画时，会看不到过渡的过程，直接看到结果。果。HTML5+CSS3网页设计基础教程第16章设计动画第8页16.1.3 定义过渡延迟时间定义过渡延迟时间ltransition-delay是用来指定一个动画开始执行的时间，是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行也就是说当改变元素属性值后多长时间开始执行transitio

8、n效果。该属性的语法格式如下：效果。该属性的语法格式如下：transition-delay：,*l该属性的取值该属性的取值为数值，单位为为数值，单位为s（秒）或者（秒）或者ms(毫毫秒秒)，其使用和，其使用和transition-duration极其相似，也可以作极其相似，也可以作用于所有元素，包括用于所有元素，包括:before和和:after伪元素。伪元素。默认大小是默认大小是0，也就是变换立即执行，没有延迟。，也就是变换立即执行，没有延迟。HTML5+CSS3网页设计基础教程第16章设计动画第9页16.1.4 定义过渡效果定义过渡效果ltransition-timing-functio

10、：过渡效果逐渐变慢。默认值。linear：匀速过渡效果。：匀速过渡效果。ease-in：加速过渡效果。：加速过渡效果。ease-out：减速过渡效果。：减速过渡效果。ease-in-out：过渡效果首先是加速，然后减速。：过渡效果首先是加速，然后减速。cubic-bezier：该值允许自定义一个时间曲线，即特定的：该值允许自定义一个时间曲线，即特定的cubic-bezier曲线。曲线。HTML5+CSS3网页设计基础教程第16章设计动画第10页主要内容主要内容16.1 过渡动画过渡动画16.2 3D动画动画 16.3 渐变效果渐变效果16.4 案例综合实战案例综合实战16.5 本章小结本章小

11、结 HTML5+CSS3网页设计基础教程第16章设计动画第11页16.2 3D动画动画 l16.2.1 定义动画名称定义动画名称l16.2.2 定义动画时间定义动画时间l16.2.3 定义动画播放方式定义动画播放方式l16.2.4 定义动画延迟时间定义动画延迟时间l16.2.5 定义动画播放次数定义动画播放次数l16.2.6 定义动画播放方向定义动画播放方向l16.2.7 控制播放状态控制播放状态l16.2.8 翻转的图片翻转的图片HTML5+CSS3网页设计基础教程第16章设计动画第12页16.2.1 定义动画名称定义动画名称lanimation-name用来定义一个动画的名称，基用来定

12、义一个动画的名称，基本语法格式如下：本语法格式如下：animation-name:none|IDENT,none|IDENT*;l其中，其中，IDENT是由是由Keyframes创建的动画名，换创建的动画名，换句话说，此处的句话说，此处的IDENT要和要和Keyframes中的中的IDENT一致，如果不一致，将不能实现任何动画一致，如果不一致，将不能实现任何动画效果；效果；none为默认值，当值为为默认值，当值为none时，将没有时，将没有任何动画效果。另外，这个属性和前面所介绍的任何动画效果。另外，这个属性和前面所介绍的transition一样，可以同时附几个一样，可以同时附几个animat

13、ion给一给一个元素，只需要用逗号个元素，只需要用逗号“，”隔开。隔开。HTML5+CSS3网页设计基础教程第16章设计动画第13页16.2.2 定义动画时间定义动画时间lanimation-duration用来指定元素播放动画所持用来指定元素播放动画所持续的时间长短，基本语法格式如下：续的时间长短，基本语法格式如下：animation-duration:,*l其中，其中，为数值，单位为为数值，单位为s（秒），其默认（秒），其默认值为值为0。这个属性和。这个属性和transition中的中的transition-duration使用方法一样。使用方法一样。HTML5+CSS3网页设计基础教程

15、ransition中的中的transition-timing-function一一样，样，animation-timing-function具有以下具有以下6种变种变换方式：换方式：ease、ease-in、ease-out、ease-in-out、linear和和cubic-bezier，使用方法与，使用方法与transition相同。相同。HTML5+CSS3网页设计基础教程第16章设计动画第15页16.2.4 定义动画延迟时间定义动画延迟时间lanimation-delay用来指定元素动画开始时间，用来指定元素动画开始时间，即动画延迟播放时间，基本语法格式如下：即动画延迟播放时间，基本

16、语法格式如下：animation-delay:,*l其中，其中，为数值，单位为为数值，单位为s(秒秒)，其默认值也，其默认值也是是0。这个属性和。这个属性和transition-delayy使用方法是一使用方法是一样的。样的。HTML5+CSS3网页设计基础教程第16章设计动画第16页16.2.5 定义动画播放次数定义动画播放次数lanimation-iteration-count用来指定元素播放动用来指定元素播放动画的循环次数，基本语法格式如下：画的循环次数，基本语法格式如下：animation-iteration-count:infinite|,infinite|*l其中，取值其中，取值

17、为数字，其默认值为为数字，其默认值为1；infinite为无限次数循环。为无限次数循环。HTML5+CSS3网页设计基础教程第16章设计动画第17页16.2.6 定义动画播放方向定义动画播放方向lanimation-direction用来指定元素动画播放的方用来指定元素动画播放的方向，基本语法格式如下：向，基本语法格式如下：animation-direction:normal|alternate,normal|alternate*l其中，有两个值，默认值为其中，有两个值，默认值为normal，如果设置为，如果设置为normal时，动画的每次循环都是向前播放；另一时，动画的每次循环都是向前播放

18、；另一个值是个值是alternate，其作用是，动画播放在第偶数，其作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。次向前播放，第奇数次向反方向播放。HTML5+CSS3网页设计基础教程第16章设计动画第18页16.2.7 控制播放状态控制播放状态lanimation-play-state主要用来控制元素动画的主要用来控制元素动画的播放状态，基本语法格式如下：播放状态，基本语法格式如下：animation-play-state:running|paused,running|paused*l其中，主要有其中，主要有running和和paused两个值。两个值。running为默认值。

19、他们的作用就类似于音乐播为默认值。他们的作用就类似于音乐播放器一样，可以通过放器一样，可以通过paused将正在播放的动画停将正在播放的动画停下了，也可以通过下了，也可以通过running将暂停的动画重新播将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如播放，而是从暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始果暂时了动画的播放，元素的样式将回到最原始设置状态。设置状态。HTML5+CSS3网页设计基础教程第16章设计动画第19页16.2.8 翻转的图片翻转的图片l本节借

20、助本节借助animation属性来设计自动翻转的图片属性来设计自动翻转的图片效果，该效果模拟效果，该效果模拟2D平面中实现平面中实现3D翻转，在这个翻转，在这个动画中，图片在动画中，图片在X轴上逐渐压缩，然后水平翻转轴上逐渐压缩，然后水平翻转图片，在图片，在2D平面中做出平面中做出3D翻转效果。翻转效果。l详情见详情见【例例16-5】翻转的图片。翻转的图片。HTML5+CSS3网页设计基础教程第16章设计动画第20页主要内容主要内容16.1 过渡动画过渡动画16.2 3D动画动画 16.3 渐变效果渐变效果16.4 案例综合实战案例综合实战16.5 本章小结本章小结 HTML5+CSS3网页

21、设计基础教程第16章设计动画第21页16.3 渐变效果渐变效果l16.3.1 线性渐变在线性渐变在Webkit下的应用下的应用l16.3.2 线性渐变在线性渐变在Mozilla下的应用下的应用l16.3.3 线性渐变在线性渐变在Opera下的应用下的应用l16.3.4 线性渐变在线性渐变在IE下的应用下的应用HTML5+CSS3网页设计基础教程第16章设计动画第22页16.3.1 线性渐变在线性渐变在Webkit下的下的应用应用lWebkit是第一个支持渐变的浏览器引擎，其支持渐变的是第一个支持渐变的浏览器引擎，其支持渐变的方法如下：方法如下：-webkit-linear-gradient

22、(|,?,*)/新的写法新的写法-webkit-gradient(,?,?,*)/传统写法传统写法lwebkit-gradient是是webkit引擎对渐变的实现参数，一共引擎对渐变的实现参数，一共有有5个。第一个参数表示渐变类型（个。第一个参数表示渐变类型（type），可以是），可以是linear（线性渐变）或者（线性渐变）或者radial（径向渐变）。第二个参（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如这对值可以用坐标形式表示，也可以用关键值表示，比如 lef

23、t top（左上角）和（左上角）和left bottom（左下角）。第四个和（左下角）。第四个和第五个参数，分别是两个第五个参数，分别是两个color-stop函数。函数。color-stop函函数接受两个参数，第一个表示渐变的位置，数接受两个参数，第一个表示渐变的位置，0为起点，为起点，0.5为中点，为中点，1为结束点；第二个表示该点的颜色。为结束点；第二个表示该点的颜色。HTML5+CSS3网页设计基础教程第16章设计动画第23页16.3.2 线性渐变在线性渐变在Mozilla下的下的应用应用lFirefox浏览器从浏览器从3.6版本开始支持渐变设计。版本开始支持渐变设计。Gecko引擎

24、定义了两个私有函数，分别用来设计引擎定义了两个私有函数，分别用来设计线性渐变和径向渐变。基本语法格式如下：线性渐变和径向渐变。基本语法格式如下：-moz-linear-gradient(|,?,*)l定义渐变起始点，取值包含数值、百分定义渐变起始点，取值包含数值、百分比，也可以使用关键字。比，也可以使用关键字。l参数定义直线渐变的角度。参数定义直线渐变的角度。l参数定义步长。参数定义步长。HTML5+CSS3网页设计基础教程第16章设计动画第24页16.3.3 线性渐变在线性渐变在Opera下的应下的应用用l线性渐变在线性渐变在Opera下的使用语法如下：下的使用语法如下：-o-linear

25、-gradient(|,?,);/*Opera 11.10+*/l其中的各项参数与其中的各项参数与Mozilla下的渐变参数相同。例如，要下的渐变参数相同。例如，要在在Opera浏览器下实现如图浏览器下实现如图16-8所示的渐变效果，代码如所示的渐变效果，代码如下：下：background:-o-linear-gradient(top,#ccc,#000);HTML5+CSS3网页设计基础教程第16章设计动画第25页16.3.4 线性渐变在线性渐变在IE下的应用下的应用lIE依靠滤镜实现渐变，语法格式如下：依靠滤镜实现渐变，语法格式如下：filter:progid:DXImageTransf

26、orm.Microsoft.gradient(GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB);/*IE*/-ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB);/*IE8+*/l其中，参数其中，参数startColorstr表示起点的颜色，表示起点的颜色，endColorstr表示终点颜色。表示终点颜色。GradientType表示渐变类型，表示渐变类型，0为

27、缺省值，为缺省值，表示垂直渐变，表示垂直渐变，1表示水平渐变。表示水平渐变。HTML5+CSS3网页设计基础教程第16章设计动画第26页主要内容主要内容16.1 过渡动画过渡动画16.2 3D动画动画 16.3 渐变效果渐变效果16.4 案例综合实战案例综合实战16.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第16章设计动画第27页16.4 案例综合实战案例综合实战l设计级联菜单设计级联菜单l设计实用按钮设计实用按钮HTML5+CSS3网页设计基础教程第16章设计动画第28页主要内容主要内容16.1 过渡动画过渡动画16.2 3D动画动画 16.3 渐变效果渐变效果16.4 案例综合实战案例综合实战16.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第16章设计动画第29页16.5 本章小结本章小结 l本章全面讲述了本章全面讲述了CSS3动画的功能，主要内容包动画的功能，主要内容包括过渡动画、括过渡动画、3D动画、渐变效果等内容，最后通动画、渐变效果等内容，最后通过两个综合案例使读者能够综合使用这些功能进过两个综合案例使读者能够综合使用这些功能进行工程实践。行工程实践。

展开阅读全文