一、transition过渡
1.1、transition-property:all;
指定可以过渡的属性值,默认的值为all.当然我们也可以设置具体的值。例如:transition-property: width;指该元素的width是要过渡的属性,我们也可以设置多个属性。transition-property:width,height;多个属性之间用逗号隔开。
1.2、transition-duration:0s;
指属性过度所需要的时间,单位是秒,其默认值是0s;结合1.1可知,transition-property:width;transition-duration:2s;表示该元素的宽度过渡所需要的时间为2s。
1.3、transition-timing-function:ease;
过渡动画的类型。默认值为ease。当然transition-timing-function的属性不知这么多。如下图所示,ease:表示先慢-快-慢,linear:表示匀速进行,ease-in:表示先快-慢,ease-out:表示先慢-快,ease-in-out:表示先慢-快-慢。
最最关键的有一个cubic-bezier曲线,在Chrome检查里面,点击tran里面的cubic-bezier会出现下图所示的样式,在这里我们可以把曲线弄成我们想要的样式。图形最上面的小球的运动轨迹就是当前我们调试的cubic-bezier曲线的运动轨迹。然后将下面的数值复制到我们的代码中就可以了。
二、transform变形
2.1、transform:translate();位移或者变形。
2.1.1、transform:translateX(length);表示当前元素沿着X轴移动length长度的距离。当length为正值时表示沿着X轴正方形移动,length为负值时表示沿着X轴的负方向移动。
2.1.2、transform:translateY (length);表示当前元素沿着 Y轴移动length长度的距离。当length为正值时表示沿着 Y轴正方形移动,length为负值时表示沿着 Y轴的负方向移动。
2.1.3、transform:translate (length,length);表示当前元素沿着 X,Y轴移动length长度的距离。当length为正值时表示沿着X,Y轴正方形移动,length为负值时表示沿着X,Y轴的负方向移动。注意:当transform:translate (length);只有一个值时,默认表示在X轴上移动。
2.2、transform: scale();缩放(适应于设置小于12px的字体大小)
2.2.1、transform: scaleX(数值);表示在X轴方向上进行缩放。数值可以是整数可以是负值,当然也可以是小数。默认值为1;
2.2.2、transform: scale Y(数值);表示在 Y轴方向上进行缩放。数值可以是整数可以是负值,当然也可以是小数。默认值为1;
2.2.3、transform: scale(数值,数值);表示在X,Y轴方向上进行缩放。数值可以是整数可以是负值,当然也可以是小数。默认值为1;与tran所不同的是,scale设置一个属性值时,表示X轴Y轴上都生效。
2.3、transform:rotate()旋转
2.3.1、transform:rotateX(deg);表示该元素在X轴上进行旋转,当deg为正时,代表沿着顺时针旋转,为负值使表示逆时针旋转。
2.3.2、transform:rotate Y(deg);表示该元素在 Y轴上进行旋转,当deg为正时,代表沿着顺时针旋转,为负值使表示逆时针旋转。
2.3.3、transform:rotate(deg);表示该元素在 Z轴上进行旋转,当deg为正时,代表沿着顺时针旋转,为负值使表示逆时针旋转。
2.4、transform:skew() 倾斜 (适应于制作平行四边形)
2.4.1、transform:skewX(deg);表示该元素沿着X轴进行倾斜,当deg为正值时,会逆时针倾斜,为负值时,沿着顺时针倾斜。
2.4.1、transform:skew Y(deg);表示该元素沿着 Y轴进行倾斜,当deg为正值时,会逆时针倾斜,为负值时,沿着顺时针倾斜。
2.4.1、transform:skew (deg,deg);表示该元素沿着X轴 Y轴进行倾斜,当deg为正值时,会逆时针倾斜,为负值时,沿着顺时针倾斜。
网友评论