第12章 过渡、变形及动画.docVIP

第12章 CSS的高级应用 CSS 3中增加了许多革命性的创新功能，如添加了文本阴影、圆角边框、多列布局和盒布局等相关的静态样式属性。除此之外CSS 3中还添加了实现动态变化的样式属性，使用这些属性可以实现元素过渡、平移、移动以及缩放等效果，本节将详细介绍这些属性。 通过本章的学习，读者可以对CSS 3中的过渡、转换和动画有所了解，并且能够熟练地使用相关属性实现过渡、移动、旋转、倾斜和缩放等特效。 本章学习要点： 掌握过渡、平移和动画效果实现的浏览器支持情况 掌握相关属性实现过渡效果的方法 掌握transition属性的使用方法 掌握如何使用transform属性实现平移、缩放、倾斜和旋转操作 掌握如何实现更改元素原点坐标的效果 熟悉设置动画关键帧的语法 掌握及动画相关的属性及使用方法 12.1 过渡 过渡可以动态改变颜色的值，以动画的形式从一种颜色过渡到另外一种。一般情况下如果要改变一个样式属性的值，变化就会立即发生且中间没有过渡状态，但是CSS 3中提供的相关属性解决了这个问题。 12.1.1 浏览器支持情况 CSS 3中及过渡相关的属性有多个，如transtion-duration、transtion-property、transtion-delay和transtion-timing等。目前所有主流的浏览器都不提供对这些属性的支持，但是可以通过扩展属性（即添加前缀）来实现。具体说明如下所示： Chrome和Safari浏览器可以通过添加-webkit-前缀来支持 Opera浏览器可以通过添加-o-前缀来支持 Firefox浏览器可以通过添加-moz-前缀来支持 Internet Explorer浏览器可以通过添加-ms-前缀来支持 12.1.2 transition-duration属性 transition-duration属性用于指定过渡经过的时间，即指定从旧属性换到新属性需要多长时间才能完成。如果将该属性的值指定为非负数或不设置，则会被视为0。该属性的单位是秒（s）或者毫秒（ms）。 transition-duration属性的语法非常简单，只需要在该属性后设置过渡动画所需要的时间即可。其语法形式如下： transition-duration:time; 下面的示例代码演示了当鼠标移动到图片上时在3秒之内从当前图片过渡到完整图片并且为图片的边框添加样式。具体代码如下所示： img { width:174px; //图片宽度 height:279px; //图片高度 margin-left:20px; margin-top:20px; transition-duration: 3s; -moz-transition-duration: 3s; //Firefox浏览器 -webkit-transition-duration: 3s; //Chrome或Safari浏览器 -o-transition-duration: 3s; //Opera浏览器 } img:hover //悬浮时的效果 { width:574px; border:1px solid #E1E1E1; } transition-duration属性指定的时间也将作用于“逆向”过渡，即从最终效果返回到原始效果所需要的时间。另外如果要在JavaScript中对某个对象添加该属性，需要根据浏览器是否支持来添加代码，以Google浏览器为例脚本代码为object.style.WebkitTranstionDuration=“3s”。其中object为对象名称，Webkit为浏览器支持该属性时添加的前缀名。 12.1.3 transition-property属性 transition-property指定要进行过渡的CSS样式属性名称，如果要指定多个属性名称则需要使用逗号分隔。该属性的语法形式如下： transition-property:none | all | property; 上述语法中可以将transition-propery属性的值设置为3个，它们的具体说明如下： none 不对任何属性进行过渡 all 对所有的属性进行过度 property 定义进行过渡的属性名称 例如下面的示例代码指定当鼠标移到img元素上时对背景色使用过渡效果。具体代码如下所示： img:hover{ background-color:#FF0000; //指定悬浮时过渡的背景色 transition-property: background-color; //指定背景色的CSS属性 -webkit-transition-property: ba