《（本科）第9章 过渡、变形和动画ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）第9章 过渡、变形和动画ppt课件.pptx（75页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第9章 过渡、变形和动画第9章 过渡、变形和动画网页设计与制作（HTML+CSS）（第2版）学习目标/Target理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。掌握变形属性，能够制作2D变形、3D变形效果。掌握动画设置方法，能够熟练制作网页中常见的动画效果。章节概述/ Summary在传统的网页设计中，当网页中要显示动画或特效时，往往需要使用JavaScript脚本或者Flash来实现。在CSS3中，新增了过渡、变形和动画属性、可以轻松实现旋转、缩放、移动和过渡等动画效果，让动画和特效的实现变得更加简单。本章将对CSS3中的过渡、变形和动画进行详细讲解。目录/Conten
2、ts9.1过渡9.2变形9.3动画9.4阶段案例制作表情图片过渡9.1过渡CSS提供了强大的过渡属性（CSS3属性），它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果。例如，渐显、渐隐、速度的变化等。本节将详细讲解在网页中添加过渡效果的方法。9.1.1 transition-property属性掌握设置transition-property属性的用法，能够并在网页中运用。学习目标9.1.1 transition-property属性transition-property属性是设置应用过渡的CSS属性，例如，宽度属性、背景属性等。tra
3、nsition-property: none | all | property;属性值说明none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个属性名称之间以逗号分隔。9.1.1 transition-property属性浏览器私有前缀浏览器私有前缀是区分不同内核浏览器的标示。由于W3C组织每提出一个新属性，都需要经过一个耗时且复杂的标准制定流程。在标准还未确定时，部分浏览器已经根据最初草案实现了新属性的功能，为了与之后确定的标准进行兼容，各浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器再逐步支持不带前缀的CS
4、S3新属性。多学一招:9.1.1 transition-property属性浏览器私有前缀多学一招:属性值描述-webkit-谷歌浏览器、Safari浏览器-moz-火狐浏览器-ms-IE浏览器-o-欧朋浏览器9.1.2 transition-duration属性掌握设置transition-duration属性的用法，并能够在网页中运用。学习目标9.1.2 transition-duration属性transition-duration属性用于定义过渡效果持续的时间。transition-duration:time;9.1.3 transition-timing-function属性掌握设置
5、transition-timing-function属性的用法，并能够在网页中运用。学习目标9.1.3 transition-timing-function属性transition-timing-function属性规定过渡效果的速度曲线。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);属性值说明linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cub
6、ic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速开始，然后逐渐加快的过渡效果，等同于cubic-bezier(0.42,0,1,1）。9.1.3 transition-timing-function属性transition-timing-function属性规定过渡效果的速度曲线。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);ease-out指定以慢速结束的过渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-
7、in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在01之间。属性值说明9.1.4 transition-delay属性掌握设置transition-delay属性的用法，并能够在网页中运用。学习目标9.1.4 transition-delay属性transition-delay属性规定过渡效果的开始时间。transition-delay:time;9.1.5 transition属性掌握设置transition属性用法，并能够在网页中运用。学习目标
8、9.1.5 transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性transition：property duration timing-function delay;注意：如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。 变 形9.2变形在CSS3中，通过变形可以对元素进行平移、缩放、倾斜和旋转等操作。同时变形可以和过渡属性
9、结合，实现一些绚丽网页动画效果。网页中添加的变形效果主要包括2D变形和3D变形两种，本节将对这两种变形效果进行详细讲解。9.2.1 认识transform掌握transform属性的用法，能够通过不同的属性值为网页设置变形效果。学习目标9.2.1 认识transform在CSS3之前都需要依赖图片、Flash或JavaScript才能完成。9.2.1 认识transform现在，使用CSS3就可以实现这些变形效果。1 无需加载额外的文件2 提高了网页开发者的工作效率3 提高了页面的执行速度9.2.1 认识transformCSS3变形平移旋转缩放倾斜9.2.1 认识transformCSS3的
10、变形（transform）属性可以让元素在一个坐标系统中变形。transform：none | transform-functions;transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。9.2.1 认识transformtransform-function函数 移动元素对象，即基于X和Y坐标重新定位元素。 translate（） 缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。 scale（） 旋转元素对象，取值为一个度数值。 rotate（） 倾斜元素对
11、象，取值为一个度数值。 skew（）9.2.2 2D变形l 了解2D变形包含哪些变形效果，能够一一列举。l 掌握2D变形的方法，能够为网页模块设置2D变形效果。学习目标9.2.2 2D变形平移缩放旋转倾斜9.2.2 2D变形1.平移平移是指元素位置的变化，包括水平移动和垂直移动。在CSS3中，使用translate()可以实现元素的平移效果。transform:translate(x-value,y-value);注意：translate()中参数值的单位不可以省略，否则平移命令将不起作用。9.2.2 2D变形2.缩放在CSS3中，使用scale()可以实现元素缩放效果。transform:s
12、cale(x-value,y-value);9.2.2 2D变形在CSS3中，使用skew()可以实现元素倾斜效果。transform:skew(x-value,y-value);3.倾斜9.2.2 2D变形4.旋转在CSS3中，使用rotate()可以旋转指定的元素对象。transform:rotate(angle);注意：如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开。9.2.2 2D变形5.变换元素中心点通过transform属性可以实现元素的平移、缩放、倾斜以及旋转效果，这些变形操作都是以元素的中心点为参照。默认情况下，元素的中心点在X轴和Y轴的50%位置。如果需要
13、变换元素的中心点，可以使用transform-origin属性。transform-origin: x-axis y-axis z-axis;9.2.2 2D变形参数描述x-axis定义视图被置于X轴的何处。属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。y-axis定义视图被置于Y轴的何处。属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。z-axis定义视图被置于Z轴的何处。需要注意的是，该值不能是一个百分比值，否则将会视为无效值，一般为像素单位。通
14、过transform属性可以实现元素的平移、缩放、倾斜以及旋转效果，这些变形操作都是以元素的中心点为参照。默认情况下，元素的中心点在X轴和Y轴的50%位置。如果需要变换元素的中心点，可以使用transform-origin属性。5.变换元素中心点9.2.3 3D变形l 了解3D变形包含哪些变形效果，并能够一一列举这些效果。l 掌握3D变形的方法，能够对网页中的元素应用3D变形效果。学习目标9.2.3 3D变形X轴Y轴空间位置Z轴9.2.3 3D变形1. rotateX()在CSS3中，rotateX()可以让指定元素围绕X轴旋转。transform:rotateX(a); 定义旋转的角度值9.
15、2.3 3D变形2. rotateY()在CSS3中，rotateY()可以让指定元素围绕Y轴旋转transform:rotateY(a); 定义旋转的角度值9.2.3 3D变形注意：rotateZ()函数和rotateX()函数、rotateY()函数功能一样，区别在于rotateZ()函数用于指定一个元素围绕Z轴旋转。如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，与rotate()效果等同，但rotateZ不是在2D平面上的旋转。2. rotateY()9.2.3 3D变形3. rotated3d ()rotated3d()是rotateX()、rotateY()和
16、rotateZ()演变的综合属性，用于设置多个轴的3D旋转。例如，要同时设置X轴和Y轴的旋转，就可以使用rotated3d()。rotate3d(x,y,z,angle);9.2.3 3D变形4. perspective属性perspective属性主要用于呈现良好的3D透视效果。perspective属性的透视效果由属性值来决定，属性值越小，透视效果越突出。none具有单位的数值（通常为像素）perspective属性值9.2.3 3D变形属性名称描述属性值transform-style用于保存元素的3D 空间flat：子元素将不保留其 3D 位置。preserve-3d子元素将保留其 3D
17、 位置。backface-visibility定义元素在不面对屏幕时是否可见visible：背面是可见的。hidden：背面是不可见的。4. perspective属性perspective属性主要用于呈现良好的3D透视效果。perspective属性的透视效果由属性值来决定，属性值越小，透视效果越突出。9.2.3 3D变形方法名称描述translate3d(x,y,z)定义3D位移translateX(x)定义3D位移，仅使用X轴的值translateY(y)定义3D位移，仅使用Y轴的值translateZ(z)定义3D位移，仅使用Z轴的值scale3d(x,y,z)定义3D缩放scaleX
18、(x)定义3D缩放，通过给定一个X轴的值scaleY(y)定义3D缩放，通过给定一个Y轴的值scaleZ(z)定义3D缩放，通过给定一个Z轴的值4. perspective属性3D变形的其他方法动 画9.3动画在CSS3中，过渡和变形只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如过渡和变形实现的动态效果不能够重复播放。为了实现更加丰富的动画效果，CSS3提供了animation属性，使用animation属性可以定义复杂的动画效果。9.3.1 keyframes掌握keyframes规则的用法，能够配合动画属性为网页添加动画效果。学习目标9.3.1 keyframeskey
19、frames规则用于创建动画，animation属性只有配合keyframes规则才能实现动画效果。keyframes animationname keyframes-selectorcss-styles; 当前动画的名称 指定当前关键帧要应用到整个动画过程中的位置 定义执行到当前关键帧时对应的动画状态注意：Internet Explorer 9浏览器以及更早的版本，不支持keyframe规则和animation属性。9.3.2 animation-name属性掌握animation-name属性的用法，能够在网页中应用。学习目标9.3.2 animation-name属性animation-
20、name属性用于定义要应用的动画名称，该动画名称会被keyframes规则引用。animation-name:keyframename|none;9.3.3 animation-duration属性掌握animation-duration属性的用法，能够在网页中应用。学习目标9.3.3 animation-duration属性animation-duration属性用于定义整个动画效果完成所需要的时间。animation-duration: time;9.3.4 animation-timing-function属性掌握animation-timing-function属性的用法，能够在网页中
21、应用。学习目标9.3.4 animation-timing-function属性animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画速率。animation-timing-function:value;属性值描述linear动画从头到尾的速度是相同的。ease默认属性值。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。取值范围一般是从0到1的数值。9.3.5 an
22、imation-delay属性掌握animation-delay属性的用法，能够在网页中应用。学习目标9.3.5 animation-delay属性animation-delay属性用于定义执行动画效果延迟的时间，也就是规定动画什么时候开始。animation-delay:time; 定义动画开始前等待的时间9.3.6 animation-iteration-count属性掌握animation-iteration-count属性的用法，能够在网页中应用。学习目标9.3.6 animation-iteration-count属性animation-iteration-count属性用于定义动画
23、的播放次数。animation-iteration-count: number|infinite; 播放动画的次数 指定动画循环播放9.3.7 animation-direction属性掌握animation-direction属性的用法，能够在网页中应用。学习目标9.3.7 animation-direction属性animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。animation-direction: normal|alternate; 动画正常播放 alternate属性值会使动画在奇数次数（1、3、5等）正常播放，而在偶数次数（2、4
24、、6等）逆向播放9.3.8 animation属性掌握animation属性的用法，能够在网页中应用。学习目标9.3.8 animation属性animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。animation: animation-name animation-duration animation-timing-function
25、animation-delay animation-iteration-count animation-direction;阶段案例制作表情图片巩固过渡、变形和动画的相关知识，能够完成表情图片的制作。学习目标9.4阶段案例制作表情图片9.4阶段案例制作表情图片本章前几节重点讲解了CSS3中的高级应用，包括过渡、变形及动画等。为了使读者更好地理解这些应用，并能够熟练运用相关属性实现元素的过渡、平移、缩放、倾斜、旋转及动画等特效，本节将通过案例的形式分步骤地制作表情图片。9.4 阶段案例制作表情图片效果展示9.4 阶段案例制作表情图片实现过程分析效果图制作页面结构定义CSS样式9.4.1 分析效果
26、图1.结构分析9.4.1 分析效果图（1）为控制脸部的大div添加样式，需要对其设置圆角、宽高、背景色等。（2）为控制眉毛的p标签添加样式，需要设置宽高、圆角和顶部边框。然后通过旋转和平移制作出眉毛的形状。（3）为控制眼睛的p标签添加样式，需要设置宽高和圆角。然后通过平移确定眼睛位置。（4）为控制嘴部的p标签添加样式，需要设置设置宽高、圆角和顶部边框。然后通过平移确定嘴部位置。2.样式分析9.4.1 分析效果图（1）为控制眼球的span标签添加animation属性，确定动画名称、时间等属性值。（2）通过keyframes规则设置动画的具体样式，可以通过from、to或者百分比来指定不同位置眼球的变化情况。3.动画分析9.4.2 制作页面结构结构展示 9.4.3 定义CSS样式样式展示本章小结1.本章首先介绍了CSS3中的过渡和变形，重点讲解了过渡属性及2D转换和3D转换。然后，讲解了CSS3中的动画特效，主要包括animation的相关属性。最后，通过CSS3中的过渡、变形和动画，制作出了一个表情图片的动画。2.通过本章的学习，读者应该能够掌握CSS3中的过渡、变形和动画，并能够熟练地使用相关属性实现元素的过渡、平移、缩放、倾斜、旋转及动画等特效。本章小结