第10章CSS3中的变形与动画.ppt

《第10章CSS3中的变形与动画.ppt》由会员分享，可在线阅读，更多相关《第10章CSS3中的变形与动画.ppt（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS CSS 中的变形与动画中的变形与动画0202过渡效果过渡效果transitiontransition0303动画动画AnimationAnimation01012D2D变换变换transformtransform2D2D变换变换transformtransform1主要内容主要内容transform的基本属性值1 1应用transform属性实现旋转2 2应用transform属性实现缩放3 3应用transform属性实现平移4 4应用transform属性实现倾斜5 5变形原点6 6transformtransform的基本属性值的基本属性值transform平移缩放旋转倾斜tra

2、nsform-origin中心点transformtransform的基本属性值的基本属性值nonetranslate(,)translateX()translateY()scaleX()scaleY()scale(,)transformtransform的基本属性值的基本属性值skew(,)skewX()skewY()rotate()matrix(,)transformtransform的基本属性值的基本属性值 transform属性支持一个或多个变换函数。也就是说，通过transform属性可以实现平移、缩放、旋转和倾斜等组合的变换效果。例如，实现平移并旋转效果。不过在为其指定多个属性值时

3、不是使用常用的逗号“,”进行分隔，而是使用空格进行分隔。应用应用transformtransform属性实现旋转属性实现旋转rotate()2D旋转正值顺时针负值逆时针应用应用transformtransform属性实现缩放属性实现缩放scale(,)scaleX()scaleY()一个参数指定的比例应用应用transformtransform属性实现缩放属性实现缩放 当使用scaleX()或scaleY()函数时，实现的是非等比例缩放，也就是只能对X轴进行缩放或者只能对Y轴进行缩放。应用应用transformtransform属性实现平移属性实现平移translate(,)translate

4、X()translateY()参数像素值应用应用transformtransform属性实现平移属性实现平移X正右移动左移动X负Y正下移动Y负上移动应用应用transformtransform属性实现缩放属性实现缩放 目前主流浏览器并未支持标准的transform属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。应用应用transformtransform属性实现倾斜属性实现倾斜skew(,)skewX()skewY()参数值度数d

5、eg变形原点变形原点transform-origin变换中心点两个参数值一个参数值50%变形原点变形原点 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。语法格式如下：transform-origin：|left|center|right|top|center|bottom?变形原点变形原点leftcenterrighttopcenterbottom过渡效果transit

6、ion2主要内容主要内容指定参与过渡的属性1 1指定过渡的持续时间2 2指定过渡的延迟时间3 3指定过渡的动画类型4 4指定参与过渡的指定参与过渡的属性属性参与过渡的属性transition-property指定参与过渡的指定参与过渡的属性属性该属性的语法格式如下：transition-property：all|none|,指定参与过渡的指定参与过渡的属性属性noneall 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-

7、前缀；为Chrome浏览器添加-webkit-前缀。指定过渡的持续时间指定过渡的持续时间过渡持续的时间transition-duration指定过渡指定过渡的持续时间的持续时间 目前主流浏览器并未支持标准的transform-duration属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。该属性的语法格式如下：transition-duration：,*指定过渡的延迟时间指定过渡的延迟时间过渡延迟的时间transition-del

8、ay指定过渡的延迟时间指定过渡的延迟时间 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。该属性的语法格式如下：transition-delay：,指定过渡的动画类型指定过渡的动画类型过渡的动画类型transition-timing-function指定过渡的动画类型指定过渡的动画类型该属性的语法格式如下：transition-timing-function：linear

9、|ease|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2),linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2)*指定过渡的动画类型指定过渡的动画类型lineareaseease-inease-outease-in-outcubic-bezier(x1,y1,x2,y2)指定过渡的动画类型指定过渡的动画类型指定过渡的动画类型指定过渡的动画类型 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。

10、例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。指定过渡的动画类型指定过渡的动画类型动画Animation3主要内容主要内容关键帧1 1动画属性2 2关键帧关键帧 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。语法格式如下：keyframes name ;关

11、键帧关键帧name关键帧关键帧语法格式如下：from属性1:属性值1;属性2:属性值2;属性n:属性值n;to属性1:属性值1;属性2:属性值2;属性n:属性值n;关键帧关键帧语法格式如下：百分比1属性1:属性值1;属性2:属性值2;属性n:属性值n;百分比n属性1:属性值1;属性2:属性值2;属性n:属性值n;动画属性动画属性animation-durationanimationanimation-nameanimation-timing-functionanimation-delayanimation-iteration-count动画属性动画属性animation-fill-modean

12、imation-directionanimation-play-state关键帧关键帧 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。输入标签小结小结 本章主要讲述了本章主要讲述了CSS 3CSS 3中的变形与动画。在中的变形与动画。在CSS 3CSS 3中，可以通过中，可以通过transformtransform属性属性进行变形，主要有旋转、缩放、平移、倾斜。通过进行变形，主要有旋转、缩放、平移、倾斜。通过transitiontransition属性可以添加过渡属性可以添加过渡效果，可以指定参与过渡属性、过渡时间、过渡延迟时间、过渡动画类型等。此效果，可以指定参与过渡属性、过渡时间、过渡延迟时间、过渡动画类型等。此外，还可以通过外，还可以通过AnimationAnimation属性添加动画效果。属性添加动画效果。