HTML5+CSS3程序设计第10章CSS3中的变形与动画.pptVIP

指定参与过渡的属性 参与过渡的属性 transition-property 指定参与过渡的属性 该属性的语法格式如下： transition-property：all | none | property[ ,property ] 指定参与过渡的属性 none all property 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。 指定过渡的持续时间 过渡持续的时间 transition-duration 指定过渡的持续时间 目前主流浏览器并未支持标准的transform-duration属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。 该属性的语法格式如下： transition-duration：time[ ,time ]* 指定过渡的延迟时间 过渡延迟的时间 transition-delay 指定过渡的延迟时间 目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。 该属性的语法格式如下： transition-delay：time[ ,time ] 指定过渡的动画类型 过渡的动画类型 transition-timing-function 指定过渡的动画类型 该属性的语法格式如下： transition-timing-function：linear | 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) ]* 指定过渡的动画类型 linear ease ease-in ease-out ease-in-out cubic-bezier(x1,y1,x2,y2) 指定过渡的动画类型 * * * * * * * * * CSS 中的变形与动画 02 过渡效果——transition 03 动画——Animation 01 2D变换——transform 2D变换——transform 1 主要内容 transform的基本属性值 1 应用transform属性实现旋转 2 应用transform属性实现缩放 3 应用transform属性实现平移 4 应用transform属性实现倾斜 5 变形原点 6 transform的基本属性值 transform 平移 缩放 旋转 倾斜 transform-origin 中心点 transform的基本属性值 none translate(length[,length]) translateX(length) translateY(length) scaleX(number) scaleY(number) scale(number[[,number]) transform的基本属性值 skew(angle[,angle]) skewX(angle) skewY(angle) rotate(angle) matrix(number,number,number,number,number,number) transform的基本属性值 transform属性支持一个或多个变换函数。也就是说，通过transform属性可以实现平移、缩放、旋转和倾斜等组合的变换效果。例如，实现平移并旋转效果。不过在为其指定多个属性值时不是使用常用的逗号“,”进行分隔，而是使用空格进行分隔。 应用transform属性实现旋转 rotate(angle) 2D旋转 angle 正值 顺时针 负值 逆时针 应用transform属性实现缩放 scale(number[,number]) scaleX(number) scaleY(number) 一个参数 指定的比例 应用transform属性实现缩放 当使用scaleX(number)或sc