《HTML5 CSS3 JavaScript第6章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第6章ppt课件.pptx（76页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML5 CSS3 JavaScript第6章教学课件第6章 实现CSS3动画6.1 实现2D transform转换6.2 制作animation动画6.3 实现transition过渡和3D转换了解CSS3动画掌握CSS3中2D和3D的transform转换掌握CSS3中的transition过渡掌握CSS3中的animation动画引言在早期的Web设计中，通常依赖于Flash或JavaScript脚本来实现网页中的动画或特效。而CSS3提供了对动画的强大支持，CSS3动画包括transform转换、animation动画和transition过渡3大模块，transform转换可对网
2、页元素进行转换操作，animation动画可实现帧动画的效果，transition过渡可实现CSS属性的过渡变化，CSS3动画的应用极大的带动了网页设计的灵活性。6.1实现2D transform转换transform-origin属性案例清凉夏日主题宣传rotate()旋转translate()位移skew()倾斜scale()缩放6.1 实现2D transform转换6.1.1 transform-origin属性在CSS3中，2D转换是使用transform属性来实现文字或图像的各种转换效果，如位移、旋转、缩放、倾斜等转换方法。这些转换方法的使用，让网页效果更丰富，提升了用户的体验感。
3、CSS3中位移、旋转、缩放和倾斜都是默认以元素的中心原点进行转换，可通过transform-origin属性设置原点的位置，一旦中心原点改变，转换的效果就会不一样。transform-origin:x-axis y-axis z-axis;语法格式transform-origin属性可用来设置transform转换的原点位置。默认情况下，原点位置为元素的中心点。transform-origin属性的语法格式如下所示。transform-origin属性的语法格式如下。6.1 实现2D transform转换6.1.1 transform-origin属性transform-origin属性可取
4、值位置、百分数或px值，上述语法格式中，属性值的具体说明如6.1所示。名称名称说明明值x-axisX轴原点坐标位置（left、center、right）/百分数/px值y-axisY轴原点坐标位置（top、center、bottom）/百分数/px值z-axisZ轴原点坐标数值如transform-origin:left bottom;/transform-origin:50%30%;/transform-origin:20px 40px;属性值由于2D转换没有Z轴，transform-origin属性可不设置Z轴的值。6.1 实现2D transform转换6.1.2 translate()
5、位移translate()位移是2D转换的一种位移方法。translate()方法用于元素位移操作，在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。translate()方法与relative相对定位相似，元素位置的改变不会影响到其他元素。transform:translate(x,y);或者分开写transform:translateX(n);transform:translateY(n);语法格式translate()位移的语法格式如下。6.1 实现2D transform转换6.1.2 translate()位移translate()位移
6、可以改变元素的位置，以自身位置为基准进行移动，其值可为正数或负数，单位是px（像素）或%（百分比）。translate()位移方法可分为3种情况，具体说明如表所示。translate()方法方法说明明translate(x,y)元素在水平方向（X轴）和垂直方向（Y轴）同时移动translateX(n)元素在水平方向（X轴）移动，n值为正数时，以自身位置为基准向右移动translateY(n)元素在垂直方向（Y轴）移动，n值为正数时，以自身位置为基准向下移动原心的改变对于位移没有任何效果。6.1 实现2D transform转换6.1.3 rotate()旋转rotate()旋转是2D转换的一种
7、旋转方法。rotate()方法用于元素旋转操作，在CSS3中，可以使用rotate()方法将元素相对于原点进行旋转。transform:rotate(度数);语法格式rotate()旋转的语法格式如下。6.1 实现2D transform转换6.1.3 rotate()旋转rotate()旋转可根据给定的角度顺时针或逆时针旋转元素，其值可为正数或负数，单位是deg（角度单位）。角度值的取值范围为0360，当角度值为正数时，以顺时针（默认值）方向进行旋转；当角度值为负数时，以逆时针方向进行旋转。rotate()旋转方法采用就近旋转目标角度的原则，当旋转角度大于或等于180度时，会逆时针旋转，如设
8、置值为200deg，则会逆时针旋转160deg。原心的改变会影响旋转的效果，默认以中心原点进行旋转。6.1 实现2D transform转换6.1.3 rotate()旋转演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2和第4个“盒子”，分别进行不同先后顺序的位移和旋转，演示其不同效果。参照元素1先位移再旋转参照元素2先旋转后位移主体代码 例6.1 /*分别设置第2个和第4个元素*/.late-1 background-color:#b39cd2;transform:translateX(150px)rotate(50deg);/*先位移再旋转*
9、/-webkit-transform:translateX(150px)rotate(50deg);/*添加浏览器前缀，兼容浏览器*/.rotate-1 background-color:#dda2b6;transform:rotate(50deg)translateX(150px);/*先旋转再位移*/-webkit-transform:rotate(50deg)translateX(150px);CSS代码 例6.16.1 实现2D transform转换6.1.3 rotate()旋转演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2和第4个
10、“盒子”，分别进行不同先后顺序的位移和旋转，演示其不同效果。在使用位移与旋转实现转换效果时，要注意两者之间设置的先后顺序，顺序不一样则效果也会不一样。如果先进行位移，那么会在位移后的位置原地旋转；如果先进行旋转，那么会改变原点的位置，按照旋转后的原心方向进行位移。6.1 实现2D transform转换6.1.4 scale()缩放scale()缩放是2D转换的一种缩放方法。scale()方法用于元素缩放操作，缩放指的是缩小和放大。在CSS3中，可以使用scale()方法将元素相对于原点进行缩放。transform:scale(w,h);或者分开写transform:scaleX(w);tra
11、nsform:scaleY(h);语法格式scale()缩放的语法格式如下。6.1 实现2D transform转换6.1.4 scale()缩放scale()缩放根据给定的宽度和高度参数增加或减少元素的大小，其值可为正数或负数。scale()缩放方法可分为3种情况，具体说明如表所示。scale()方法方法说明明scale(w,h)元素在水平方向（X轴）和垂直方向（Y轴）同时缩放。当两个参数值一样时，可以只写一个scaleX(w)元素在水平方向（X轴）缩放，w值为宽度缩放的比例值scaleY(h)元素在垂直方向（Y轴）移动，h值为高度缩放的比例值比例值为01时，表示缩小。比例值大于1时，表示放
12、大。比例值为1时，处于默认状态，既不放大，也不缩小。比例值为负数时，元素翻转后再缩放。原心的改变会影响缩放的效果，默认以中心原点进行缩放，利用scale()方法进行缩放的元素不影响网页的布局。6.1 实现2D transform转换6.1.5 skew()倾斜skew()倾斜是2D转换的一种倾斜方法。skew()方法用于元素倾斜操作，在CSS3中，可以使用skew()方法将元素倾斜显示。transform:skew(x,y);或者分开写transform:skewX(x);transform:skewY(y);语法格式skew()倾斜的语法格式如下。6.1 实现2D transform转换6.
13、1.5 skew()倾斜skew()倾斜方法使元素沿指定方向倾斜给定角度，角度值表示元素的倾斜角度，角度值可为正数或负数，单位是deg（角度单位）。skew()方法方法说明明skew(x,y)元素在水平方向（X轴）和垂直方向（Y轴）同时倾斜，即元素沿水平方向（X轴）和垂直方向（Y轴）倾斜给定角度skewX(x)元素在水平方向（X轴）倾斜，即元素沿水平方向（X轴）倾斜给定角度skewY(y)元素在垂直方向（Y轴）倾斜，即元素沿垂直方向（Y轴）倾斜给定角度角度值的取值范围为0360，当角度值为正数时，以顺时针（默认值）方向进行倾斜；当角度值为负数时，以逆时针方向进行倾斜。原心的改变会影响倾斜的效果
14、，默认以中心原点进行倾斜。6.1 实现2D transform转换6.1.5 skew()倾斜演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2个“盒子”改变原心的位置进行缩放，第4个“盒子”改变原心的位置进行倾斜，演示其不同效果。缩放参照元素1 缩放元素 倾斜参照元素2 倾斜元素主体代码 例6.2 /*分别设置第2个和第4个元素*/.scale-1 transform-origin:right bottom;/*改变元素原心位置*/background-color:#ffe4c6;transform:scale(0.8);/*缩小元素*/-web
15、kit-transform:scale(0.8);/*添加浏览器前缀，兼容浏览器*/.skew-1 transform-origin:right bottom;/*改变元素原心位置*/background-color:#dda2b6;transform:skewX(50deg);/*倾斜元素*/-webkit-transform:skewX(50deg);CSS代码 例6.26.1 实现2D transform转换6.1.5 skew()倾斜演示说明制作4个宽度和高度相同，自上而下排列的“盒子”。第1个和第3个“盒子”保持原始状态，第2个“盒子”改变原心的位置进行缩放，第4个“盒子”改变原心的
16、位置进行倾斜，演示其不同效果。6.1 实现2D transform转换6.1.6 案例-清凉夏日主题宣传本实例是一个关于清凉夏日的主题宣传页面。该页面主要由块元素、图像标签、标题标签和段落标签构成，清凉夏日主题宣传页面结构简图如图6.3所示。清凉夏日主题宣传 天气 夏天是一个炎热的季节，晴空万里，太阳透过密密层层的叶子，圆影照射在地上，把地面烤得滚烫滚烫的。走在路上，迎面的风似热浪扑来，天气热得像个蒸笼。代码实现6.1 实现2D transform转换6.1.6 案例-清凉夏日主题宣传主体代码 例6.3/*使用伪元素清除浮动*/.clearfix:after content:;display:
17、block;clear:both;/*设置特色模块1和特色模块2左浮动*/#feature-1,#feature-2 float:left;/*使用空标签，清除特色模块1和特色模块2左浮动带来的影响*/.clear clear:both;/*设置特色模块3和特色模块4左浮动*/#feature-3,#feature-4 float:left;/*统一设置4个特色模块*/#feature-1,#feature-2,#feature-3,#feature-4 position:relative;/*设置相对定位*/*统一设置4个特色模块中的左部图标*/.ficon-1 img,.ficon-2 i
18、mg,.ficon-3 img,.ficon-4 img position:absolute;/*设置绝对定位*/left:15px;/*设置偏移位置*/top:15px;代码实现6.1 实现2D transform转换6.1.6 案例-清凉夏日主题宣传CSS部分代码 例6.3/*统一设置4个特色模块中的特色详情部分*/.details-1,.details-2,.details-3,.details-4 width:250px;/*设置左外边距和上外边距*/margin-left:90px;margin-top:12px;/*鼠标放至头部标签内容上时，设置背景图片*/.header:hove
19、r.bg transform:scale(0.95);/*背景图片缩小0.95倍*/*鼠标放至“ficon-1”块标签内容上时，设置内部图片*/.ficon-1:hover.img1 transform-origin:left top;/*以左上角为原心进行转换*/transform:scale(1.1)rotate(30deg);/*图片先放大1.1倍，再顺时针旋转30度*/*鼠标放至“ficon-2”块标签内容上时，设置内部图片*/.ficon-2:hover.img2 transform-origin:right bottom;/*以右下角为原心进行转换*/transform:scale
20、(1.1)rotate(-30deg);/*图片先放大1.1倍，再逆时针旋转30度*/*鼠标放至“details-1”块标签内容上时，设置内部文字标题*/#feature-1:hover.t1 transform:translate(102px);/*文字标题向右位移102px*/6.1 实现2D transform转换6.1.6 案例-清凉夏日主题宣传代码实现在上述CSS代码中，在设置页面主体部分的转换效果时，首先，统一为4个特色模块设置相对定位，再统一为4个特色模块中的左部图标设置绝对定位，使用位置属性设置图标的具体位置，然后统一设置右部的特色详情介绍。接下来就是具体实现元素转换效果。当鼠
21、标放至头部标签内容上时，设置背景图片缩小0.95倍，当鼠标分别放至4个特色模块中的左部图标时，可改变原点位置，设置图片先放大1.1倍，再以不同方向旋转30度，当鼠标分别放至特色详情介绍的内容上时，设置文字标题向右位移102px。本节小结本节内容主要讲解了设置transform转换原点位置的transform-origin属性，以及4种实现转换效果的translate()位移、rotate()旋转、scale()缩放和skew()倾斜方法。通过本节的学习，希望读者可以了解CSS动画中的4种转换效果，以及掌握其使用方法。6.2制作animation动画keyframes规则案例无缝轮播图动画浏览器
22、前缀animation属性6.2 制作animation动画随着前端技术的不断升级，在网页上实现动画效果的方式随之增加。其中，CSS3的animation属性可直接实现动画效果，可以取代许多网页的动画图像和Flash动画，以及JavaScript实现的效果。animation动画不需要触发任何事件，就可以显式的随时间变化来改变元素的CSS属性，从而达到动画效果。animation动画主要由keyframes关键帧、animation属性和CSS样式属性3个部分组成，资源占用少，不仅减少内存空间，还使网页更具有灵动性。6.2 制作animation动画keyframes规则用于创建动画，在key
23、frames中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。在动画过程中，可以多次更改CSS样式的设定。动画过程变化的发生有2种设置方式，1种是使用关键字“from”和“to”，另1种是使用百分比。在创建动画时，通常以百分比来规定变化发生的时间，0是开头动画，100是结束动画，其中0%对应的是from，100%对应的是to。6.2.1 keyframes规则设置方式6.2 制作animation动画6.2.1 keyframes规则keyframes规则的基本语法格式如下所示。语法格式keyframes 动画名称from CSS样式to CSS样式或者在一个keyframes
24、规则中可以由多个百分比构成的，即在“0%”到“100%”之间创建多个百分比，为每个百分比中的动画效果元素添加上不同的CSS样式，从而达到一种不断变化的效果，使动画效果呈现得更细腻。keyframes 动画名称0%CSS样式.100%CSS样式6.2 制作animation动画animation属性通过定义多个关键帧以及定义每个关键帧中的元素属性来实现复杂的动画效果。animation属性是一个简写属性，主要包含animation-name、animation-duration、animation-timing-function、animation-delay、animation-iterati
25、on-count、animation-direction、animation-fill-mode和animation-play-state这8个子属性。6.2.2 animation属性6.2 制作animation动画animation-name属性表示动画的名称，也是需要绑定到选择器的keyframes名称，可以通过keyframes关键帧样式来找到对应的动画名称。6.2.2 animation属性animation-name属性animation-name:keyframename|none;语法格式animation-name属性的语法格式如下。6.2 制作animation动画ani
26、mation-duration属性表示动画的持续时间，单位可以设置成s（秒）或ms（毫秒）。6.2.2 animation属性animation-duration属性animation-duration:time;语法格式animation-duration属性的语法格式如下。animation-duration属性的默认值是0，这意味着没有动画效果，因此必须设置动画的持续时间。6.2 制作animation动画animation-timing-function属性表示动画的速度曲线，指定动画将如何完成一个周期。6.2.2 animation属性animation-timing-functio
27、n属性animation-timing-function:value;语法格式animation-timing-function属性的语法格式如下。6.2 制作animation动画animation-timing-function属性值的具体说明如表所示。6.2.2 animation属性animation-timing-function属性属性属性值说明明ease默认值。动画以低速开始，然后加快，在结束前变慢linear匀速。动画从头到尾的速度是相同的ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束6.2 制作animation动画续表。
28、6.2.2 animation属性animation-timing-function属性属性属性值说明明cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从01的数值。step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画step-end在变化过程中，都是以上一帧的显示效果来填充间隔动画steps()可传入两个参数，第一个是大于0的整数，将动画等分成指定数目的小间隔动画，根据第二个参数来决定显示效果。第二个参数设置后和step-start，step-end同义，在分成的小间隔动画中判断显示效果。animation属性提供了cubic-
29、bezier值，也就是贝塞尔曲线。贝塞尔曲线是应用于二维图形应用程序的数学曲线，可以通过http:/cubic-（贝塞尔官网）来获取想要设置的样式。6.2 制作animation动画animation-delay属性表示执行动画效果的延迟时间，默认值为0，单位是s（秒）或ms（毫秒）。6.2.2 animation属性animation-delay属性animation-delay:time;语法格式animation-delay属性的语法格式如下。动画延迟时间的数值可以是负数，动画效果会从该时间点开始，之前的动作不执行。例如，将属性值设置为-2s时，动画会马上开始，直接跳过前2秒进入动画，即
30、前2秒的动画不执行。6.2 制作animation动画animation-iteration-count属性表示动画的执行次数。6.2.2 animation属性animation-iteration-count属性animation-iteration-count:number|infinite;语法格式animation-iteration-count属性的语法格式如下。animation-iteration-count属性有2个属性值。number为一个数值，定义应该播放多少次动画。infinite为指定动画应该播放无限次，即动画执行无限次。6.2 制作animation动画animat
31、ion-direction属性表示是否应该轮流反向播放动画。6.2.2 animation属性animation-direction属性animation-direction:normal|reverse|alternate|alternate-reverse;语法格式animation-direction属性的语法格式如下。6.2 制作animation动画animation-direction属性值的具体说明如表所示。6.2.2 animation属性animation-direction属性属性属性值说明明normal默认值。动画按正常播放reverse动画反向播放alternate动画
32、在奇数次（1、3、5）正向播放，在偶数次（2、4、6）反向播放alternate-reverse动画在奇数次（1、3、5）反向播放，在偶数次（2、4、6）正向播放值得注意的是，如果动画被设置为只播放1次，则该属性将不起作用。动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放，而animation-direction属性可以重写该行为。6.2 制作animation动画animation-fill-mode属性可控制动画停止位置。在正常情况下，动画结束后会回到初始状态，可通过animation-fill-mode属性设置动画结束时的停止位置。6.2.2 animation属性anima
33、tion-fill-mode属性animation-fill-mode:none|forwards|backwards|both;语法格式animation-fill-mode属性的语法格式如下。6.2 制作animation动画animation-fill-mode属性值的具体说明如表所示。6.2.2 animation属性animation-fill-mode属性属性属性值说明明none默认值。动画在执行之前和之后不会应用任何样式到目标元素forwards动画停止在结束状态，即停止在最后一帧backwards动画回到初始状态both动画遵循forwards和backwards的规则。也就是
34、说，animation-fill-mode相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式animation-fill-mode属性值设置为backwards时，要参考animation-direction属性的取值。当animation-direction属性值为“normal”或“alternate”时，回到初始状态；当animation-direction属性值为“reverse”或“alternate-reverse”时，停止在最后一帧。6.2 制作animation动画animation-play-stat
35、e属性定义动画的播放状态。6.2.2 animation属性animation-play-state属性animation-play-state:paused|running;语法格式animation-play-state属性的语法格式如下。animation-play-state属性有2个属性值。paused表示暂停动画；running表示播放动画，为默认值。一般情况下是通过JavaScript方式控制动画的暂停和播放。6.2 制作animation动画animation属性的简写格式如下所示。6.2.2 animation属性animation:name duration timing-
36、function delay iteration-count direction fill-mode play-state;简写格式值得注意的是，定义动画时，必须定义动画的名称和动画的持续时间。如果省略持续时间，则animation-duration属性值默认为0，动画将无法执行。6.2 制作animation动画由于浏览器厂商众多，一些新出现的CSS3属性在不同的浏览器上会出现兼容问题。为了解决这一情况，可在这些CSS3属性上加入浏览器引擎前缀，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。常见的浏览前缀的具体说明如表所示。6.2.3 浏览器前缀属性属性值内核内核前前缀Chrom
37、e(谷歌浏览器)和Safari(苹果浏览器)WebKit内核-webkit-Firefox(火狐浏览器)Gecko内核-moz-IE(IE浏览器)Trident内核-ms-Opera(欧朋浏览器)Presto内核-o-6.2 制作animation动画浏览器内核就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释会有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。IE10和Firefox浏览器（=16版本）支持没有前缀的animation属性
38、，Firefox浏览器（16版本）使用-moz-前缀，由于现在Firefox浏览器的版本通常不低，Firefox浏览器可以直接使用没有前缀的animation属性，但是Chrome、Safari和Opera浏览器不支持，因此animation属性需使用webkit前缀。6.2.3 浏览器前缀6.2 制作animation动画使用浏览器前缀示例如下。6.2.3 浏览器前缀-webkit-keyframes myAnim 0%background:#f00;50%background:#0f0;100%background:yellowgreen;6.2 制作animation动画6.2.4 案例
39、-无缝轮播图动画本实例是一个关于清凉夏日主题背景的浏览动画页面。该页面主要由块元素、无序列表、内联元素、图像标签和标题标签构成，页面结构简图如图所示。无缝轮播图动画 清凉夏日主题浏览 1 2 3 4 5 6 代码实现6.2 制作animation动画6.2.4 案例-无缝轮播图动画主体代码 例6.4/*设置外层容器*/#box width:650px;height:300px;margin:10px auto;overflow:hidden;/*隐藏溢出的内容部分*/*设置内层容器*/.picture width:3900px;height:300px;list-style:none;/*取消
40、项目标记*/*设置项目列表与图片的宽度和高度相同*/.pictureli,img width:650px;height:300px;/*设置项目列表*/.pictureli float:left;/*向左浮动*/position:relative;/*设置相对定位*/animation:summer 22s ease 2s infinite alternate;/*设置动画效果*/-webkit-animation:summer 22s ease 2s infinite alternate;/*添加浏览器前缀，兼容浏览器*/代码实现6.2 制作animation动画6.2.4 案例-无缝轮播图
41、动画CSS部分代码 例6.4/*设置图片中右下角的序号*/span width:18px;height:18px;line-height:18px;text-align:center;color:#FF3300;display:inline-block;/*转化为内联块元素*/border:1px solid#FF3300;/*设置边框样式*/border-radius:50%;/*设置圆角*/position:absolute;/*设置绝对定位*/right:70px;/*设置偏移位置*/bottom:20px;/*使用keyframes规则创建动画*/keyframes summer 0%
42、left:0 20%left:-650px 45%left:-1300px 60%left:-1950px 80%left:-2600px 100%left:-3250px-webkit-keyframes summer 0%left:0 20%left:-650px 45%left:-1300px 60%left:-1950px 80%left:-2600px 100%left:-3250px6.2 制作animation动画6.2.4 案例-无缝轮播图动画代码实现在上述CSS代码中，首先，使用overflow属性隐藏外层容器溢出的内容部分，再设置内层容器中的无序列表，使用float属性将6
43、个项目列表设置向左浮动，并添加相对定位，以及使用animation属性设置动画效果。然后设置背景图片中的右下角序号，为内联元素添加绝对定位，使用位置属性设置图标的具体位置。最后使用keyframes规则创建动画，配合animation属性实现动画效果。本节小结本节内容主要讲解了keyframes规则创建动画，animation属性设置动画具体实现效果，以及有关浏览器前缀的使用方法。通过本节的学习，希望读者可以使用CSS3的animation属性在网页中添加动画。6.3实现transition过渡和3D转换transition属性案例旋转夏日主题背景3D rotate()旋转3D转换属性3D其他
44、转换6.3 实现transition过渡和3D转换CSS3的transition过渡属性允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在光标单击、光标移过、获得焦点或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。transition过渡属性是一个简写属性，主要包含transition-property、transition-duration、transition-timing-function和transition-delay这4个子属性。6.3.1 transition属性6.3 实现transition过渡和3D转换transition-property属性规定
45、设置过渡效果的CSS属性的名称，也就是表明需要对元素的哪一个属性进行过渡操作。6.3.1 transition属性transition-property属性transition-property:none|all|property;语法格式transition-property属性的语法格式如下。6.3 实现transition过渡和3D转换transition-property属性值的具体说明如表所示。6.3.1 transition属性transition-property属性属性属性值说明明none表示没有属性获得过渡效果all表示所有属性获得过渡效果property定义应用过渡效果的C
46、SS属性的名称列表，列表以“，”（逗号）分隔6.3 实现transition过渡和3D转换transition-duration属性表示过渡的持续时间，单位可以设置成s（秒）或ms（毫秒）。6.3.1 transition属性transition-duration属性transition-duration:time;语法格式transition-duration属性的语法格式如下。6.3 实现transition过渡和3D转换transition-timing-function属性表示过渡的速度曲线，指定过渡将如何完成一个周期。6.3.1 transition属性transition-timi
47、ng-function属性transition-timing-function:value;语法格式transition-timing-function属性的语法格式如下。transition-timing-function与animation-timing-function的动画形式完全一样，属性的取值相同，默认情况下是ease形式。6.3 实现transition过渡和3D转换transition-delay属性表示执行过渡效果的延迟时间，默认值为0，单位是s（秒）或ms（毫秒）。6.3.1 transition属性transition-delay属性transition-delay:ti
48、me;语法格式transition-delay属性的语法格式如下。过渡延迟时间的数值可以是正数或负数，transition-delay与animation-delay的效果完全一样。6.3 实现transition过渡和3D转换transition过渡和animation动画都能在网页上实现动态效果，但它们之间是存在差异的，具体有以下4点。6.3.1 transition属性过渡效果与动画效果的区别transition过渡需要事件触发，无法在网页加载时自动发生。animation动画不需要事件触发，可直接实现动画效果。transition过渡是一次性的，不能重复发生，除非再次触发。animat
49、ion动画能执行无限次。transition过渡只有两个状态，即开始状态和结束状态，不能定义中间状态。animation动画可定义多个状态。一条transition过渡规则，只能定义一个属性的变化，不能涉及多个属性。animation动画能定义多个属性的变化。6.3 实现transition过渡和3D转换CSS3的3D转换功能与2D转换功能类似，2D转换元素可以在平面空间内进行位置或形状的转换，而3D转换元素可以在三维空间（也就是立体空间）内进行位置或形状的转换，具有更丰富的视觉效果。3D即三维空间，是指在平面二维系中又加入了一个方向向量构成的空间系。3D指的是坐标轴的三个轴，即x轴、y轴、z
50、轴，其中x表示左右空间，y表示上下空间，z表示前后空间，这样就形成了视觉立体感。3D转换主要有perspective、transform-style、perspective-origin和backface-visibility4个属性。6.3.2 3D转换属性6.3 实现transition过渡和3D转换perspective属性规定3D元素的透视效果。perspective属性可以简单理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由自身的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。6.3