transition-duration过渡过程需要的时间属性-北京邮电大学世纪学院.PPTVIP

网页设计技术 任课教师：孙丽娜 北京邮电大学-世纪学院-艺术与传媒学院 * 第三部分（40学时）HTML5+CSS3网页开发实战精解 第6章CSS 3动画设计（4学时） 传统网页动画设计主要借助Flash或JavaScript来实现，CSS 3提供了直接使用CSS实现动画的方案，本节主要讲解CSS 3实现2D动画 一、CSS 3 2D转换 二、CSS 3过渡效果 三、CSS 3动画设计 * 一、 CSS 3 2D转换 CSS 3新增transform属性，可用于元素变形，让某个元素改变形状、大小和位置等。 transform属性语法如下： 取值说明： none默认值，不设置元素变形。 transform-functions：设置一个或多个变形函数。变形函数包括旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix等。设置多个变形函数时，用空格间隔。 * transform : none | transform-functions ; 1、translate()元素变形 translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。可参考如下代码片段理解： translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。 * div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } 2.rotate()元素旋转 rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。(代码6-26 元素旋转) * div.rotate_left { float:left; -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ transform:rotate(7deg); } div.rotate_right { float:left; -ms-transform:rotate(-8deg); /* IE 9 */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ transform:rotate(-8deg); } 3.scale()元素缩放 scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。可参考如下代码片段理解： * a:hover{background-color:#f90;color:#FFF; /* 变形方式：缩放 */ -webkit-transform:scale(0.8,-1.5); /* 兼容webkit内核 */ -moz-transform:scale(0.8,-1.5); /* 兼容gecko内核 */ -o-transform:scale(0.8,-1.5); /* 兼容presto内核 */ -ms-transform:scale(0.8,-1.5); /* 兼容IE9 */ transform:scale(0.8,-1.5); /* 标准写法 */ } X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。 * 4.skew()元素倾斜 skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度。可参考如下代码片段理解： skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。 * div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ } 5.matrix()元素综合变换 matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。可参考如下代码片段理解： * 效果 a:hover { background-color:#f90; color:#FFF; /