在工作中,经常要写一点小动画,这时候用jquery的动画麻烦,用css3的animate太复杂,而且兼容不好,这个时候,用点css3的小特性,就很方便了,代码也少,效果还是棒棒的!
1.1 首先使用的是box-shadow,css3属性,阴影。box-shadow的兼容性是IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。基本在工作中都能用到,下面来看看属性:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:
必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur: 可选。模糊距离。
spread: 可选。阴影的尺寸。
color:可选。阴影的颜色。
inset: 可选。将外部阴影 (outset) 改为内部阴影。
在实际的工作中,可能遇到要四周阴影的,这个时候就要一个小技巧:
将h-shadow和v-shadow设置为0,这个时候要设置模糊距离了,不然就没有阴影
1.2 下面介绍的是transition和transform。为什么给这两个一起介绍,因为在使用的过程中,基本都是结合在一起使用,很少分开。
transition兼容性:Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
兼容到ie10。所以在使用的时候就要注意了,在特点的场合就放弃吧。
transition: property duration timing-function delay;
transition-property:
规定设置过渡效果的 CSS 属性的名称。(一般都使用all,这样就在使用多个渐变属性时,不要多次添加)
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function: 规定速度效果的速度曲线。
transition-delay: 定义过渡效果何时开始。(也就是延时执行)
1.3 transform :
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
今天主要说的是2D转换,3D以后再议。
transform的属性比较其上两个就多了很多了,有十几个,包括2D和3D转换。
(图片引自w3school)