搜索
第12章CSS的高级应用CSS3中增加了许多革命性的创新功能，如添加了文本阴影、圆角边框、多列布局和盒布局等相关的静态样式属性。除此之外CSS3中还添加了实现动态变化的样式属性，使用这些属性可以实现元素过渡、平移、移动以及缩放等效果，本节将详细介绍这些属性。通过本章的学习，读者可以对CSS3中的过渡、转换和动画有所了解，并且能够熟练地使用相关属性实现过渡、移动、旋转、倾斜和缩放等特效。本章学习要点：掌握过渡、平移和动画效果实现的浏览器支持情况掌握相关属性实现过渡效果的方法掌握transition属性的使用方法掌握如何使用transform属性实现平移、缩放、倾斜和旋转操作掌握如何实现更改元素原点坐标的效果熟悉设置动画关键帧的语法掌握与动画相关的属性及使用方法12.1过渡过渡可以动态改变颜色的值，以动画的形式从一种颜色过渡到另外一种。一般情况下如果要改变一个样式属性的值，变化就会立即发生且中间没有过渡状态，但是CSS3中提供的相关属性解决了这个问题。12.1.1浏览器支持情况CSS3中与过渡相关的属性有多个，如transtion-duration、transtion-property、transtion-delay和transtion-timing等。目前所有主流的浏览器都不提供对这些属性的支持，但是可以通过扩展属性（即添加前缀）来实现。具体说明如下所示：Chrome和Safari浏览器可以通过添加-webkit-前缀来支持Opera浏览器可以通过添加-o-前缀来支持Firefox浏览器可以通过添加-moz-前缀来支持InternetExplorer浏览器可以通过添加-ms-前缀来支持12.1.2transition-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:1pxsolid#E1E1E1;}transition-duration属性指定的时间也将作用于“逆向”过渡，即从最终效果返回到原始效果所需要的时间。另外如果要在JavaScript中对某个对象添加该属性，需要根据浏览器是否支持来添加代码，以Google浏览器为例脚本代码为object.style.WebkitTranstionDuration=“3s”。其中object为对象名称，Webkit为浏览器支持该属性时添加的前缀名。12.1.3transition-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:background-color;-moz-transition-property:background-color;-o-transition-property:background-color;-moz-transition-duration:3s;-webkit-transition-duration:3s;-o-transition-duration:3s;}如果要在脚本中对某个对象添加该属性，Google浏览器中JavaScript的代码为object.style.WebkitTranstionProperty=“width,height”。其中object为对象名称，width和height表示属性名称。12.1.4transition-delay属性transition-delay属性指定过渡延迟的时间，单位为秒（s）或者毫秒（ms）。该属性的值可以为正数、负数或零，如果为负数表示过渡的动作会从该时间点开始显示，之前的所有动作都会被截断。transition-delay属性的使用方法也非常简单，直接在该属性后面设置延时时间即可。语法形式如下：transition-delay:time;例如下面的示例代码指定当鼠标移动到img元素上时对图片宽度和高度实现过渡效果。但是该动画效果不会立即执行，而是等待5秒后再缓慢的从当前图片过渡到整张图片。具体代码如下：img{width:174px;height:279px;-webkit-animation-property:width,height;-webkit-transition-duration:3s;-webkit-transition-delay:5s;/*省略Firefox浏览器和Opera浏览器的样式代码*/}另外，如果要在JavaScript代码中设置该属性，其具体代码是：object.style.transitionDelay=10s;object.style.WebkitTransitionDelay=10s;//Google或Safari浏览器object.style.MozTransitionDelay=10s;//Firefox浏览器12.1.5transition-timing-function属性transition-timing-function属性是整个过渡效果的核心属性，它指定过渡过程中的时间的计算方式，从而可以实现加速或者减速效果。该属性的语法形式如下：transition-timing-function:liear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);上述语法中指定transition-timing-function属性的值为6个，其具体说明如表12-1所示。表12-1transition-timing-function属性的值值名称说明linear默认值，指定切换效果以相同速度从开始到结束。等同于cubic-bezier(0.0,0.0,1.0,1.0)ease指定一个缓慢的开始，然后加快，最后慢慢结束。等同于cubic-bezier(0.25,0.1,0.25,1.0)ease-in指定一个缓慢的开始，然后逐渐加速（淡入效果）。等同于cubic-bezier(0.42,0,1.0,1.0)ease-out指定一个缓慢的结束（淡出效果）。等同于cubic-bezier(0,0,0.58,1.0)ease-in-out指定加速后再减速。等同于cubic-bezier(0.42,0,0.58,1)cubic-bezier(x1,y1,x2,y2)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间例如为了使实现的过渡效果更加富有立体感，可以使用transition-timing-function属性指定过渡效果。在上一节的基础上添加如下代码：img{width:174px;height:279px;-webkit-animation-property:width,height;//指定过渡属性名称-webkit-transition-duration:3s;//指定过渡时间-webkit-transition-delay:5s;//指定延时时间-webkit-transition-timing-function:ease-in-out;//指定过渡效果的名称/*省略Firefox浏览器和Opera浏览器的样式代码*/}12.1.6transition属性transition-duration、transition-propery、transition-delay和transition-timing-function属性都可以指定元素的过渡效果，但是如果为每个元素定义完整的过渡效果时需要添加每个属性，并且需要为这些属性添加前缀。这样非常麻烦，如代码冗长和不方便修改等，那么有没有一种简单的方法呢？答案是肯定的：有。CSS3中还提供了另外一种属性：transtion。transition属性是一个速记属性，通过它可以设置上述属性的值，各个属性之间使用空格分隔。其语法形式如下：transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;例如，如果使用多个属性为某个div元素实现过渡效果的代码如下：div{background-color:red;-webkit-transition-property:background-color;-webkit-transition-duration:2000ms;-webkit-transition-timing-function:ease;-webkit-transition-delay:1000ms;}但是直接使用transition属性代码就简单很多，如下所示：div{background-color:red;-webkit-transition:background-color2000msease1000ms;}使用transition属性实现过渡效果时各个参数必须按照顺序定义，不可以颠倒。使用过渡的相关属性可以实现多个过渡的效果，例如元素在更改旋转的时候也可以更改颜色。使用多个属性定义的代码如下：-webkit-transition-property:transform,color;-webkit-transition-duration:3s,2s;-webkit-transition-timing-function:ease-in,ease-out;上述代码表示在3秒内对旋转属性应用到ease-in的过渡，在2秒内对颜色属性应用到linear的过渡。如果通过指定transition属性实现多个过渡效果，需要为每个过渡集中指定所有值，并且使用逗号分隔每个过渡。其具体代码如下：-webkit-transition-transition:transform3sease-in,color2sease-out;12.1.7多个颜色过渡前面已经详细介绍了过渡的相关属性，本节使用transition属性实现多个颜色渐变过渡的效果。【实践案例12-1】实现本案例效果的具体步骤如下：（1）添加新的HTML页面，在页面的合适位置添加两个div元素。其具体代码如下：divid=divdivclass=liv/div/div（2）为