最近稍微玩了一下CSS几个有用的新特性,
几个新特性的叠加可以产生很强大的效果,
1.CSS3 Transitions 过渡效果
可以很方便地指定两种样式之间的切换过渡效果,
.box:hover{
/* 这里的all是指适用在所有效果,如果想只适用width或者height,直接替换即可,多个效果用“,”隔开 */
-moz-transition: all 800ms;
-webkit-transition: all 800ms;
-o-transition: all 800ms;
-ms-transition: all 800ms;
}
2.CSS3 Translate 移动元素
以前如果我们要写一个元素移动的动画,通常我们会设置某元素位置为absolute,然后通过JS改变其top,left,right,bottom等属性来实现动画,现在我们可以使用css3 translate来做到这一点,而完全不需要设置position为absolute。另外,这里提醒一下大家,使用css translate在android上相当杯具,而在iOS的mobile safari里面使用,则transalte2d的效果远远不如translate3d,所以,如果需要在mobile safari里面使用该属性,强烈建议使用translate3d(x,y,z)的形式,即使只是修改其中的X或者Y,也这样写。我测试过使用translateX或者translateY,效果跟2d的一样烂。
而translate3d是webkit才支持的属性,估计内部实现与2d不同,所以效果流畅很多。
以前如果我们要写一个元素移动的动画,
而translate3d是webkit才支持的属性,
.example:hover .translate{
/*这里示例的是2D的translate,参数为x,y,如果用3D则translate3d(x,y,z),但目前只有webkit支持3D*/
-moz-transform: translate(500px,0);
-webkit-transform: translate(500px,0);
-o-transform: translate(500px,0);
-ms-transform: translate(500px,0);
}
3.CSS3 transform 形变
CSS3提供了几个很有用的属性来改变元素的形状:缩放scale,旋转rotate,倾斜skew。(IE10+也支持,但是要加-ms-前缀。)
CSS3提供了几个很有用的属性来改变元素的形状:
.rotate:hover{
-moz-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
}
下面给出几个实例并附上相关代码(猛击这里新窗口查看效果):