一、CSS的过渡::从一个样式变化到另一个样式
1、transition-property:指定过渡的属性
2、transition-duration:用于定义过渡效果花费的时间,默认值为0.通常使用单位为秒(s)或毫秒(ms)。
基本语法:transition-duration:1s;
3、transition-timing-function:规定过渡效果的速度曲线,默认值为“ease”
4、transition-delay:规定过渡效果何时开始,默认值为0,常用单位依旧为秒(s)和毫秒(ms)。当设置单位为正数,过渡动作会延迟触发,当为负数时,过渡动作会从该时间点开始,之前的动作被截断。
5、transition属性:是复合属性,可以在一个属性中设置以上介绍的四种过渡属性。
基本语法:transition:property duration timing-function delay;
注意:使用transition属性设置多个过渡效果时,它的各个参数必须按照此顺序进行定义,不能颠倒。并且无论是单个属性还是简写属性,使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果,需要为每个过渡属性集中指定所有的值,并且使用逗号进行分隔。
二、transform变形属性。
1、优点:只需通过transform属性就可以实现变形效果,这也大大减少了繁琐的步骤。
同时提高了页面加载速度。
2、transform属性可以让元素在一个坐标系统中变形。transfrom属性的默认值为none,适用于内联元素和块级元素。
3、transfrom-function:用于设置变形函数,可以是一个或多个变形函数列表。
4、transform:translate(x-value,y-value);x-value指元素水平方向向上移动的距离,y-value指元素在垂直方向上移动的距离。如果省略了第二个参数,则取默认值0.当指为负数时,则表示反方向移动元素。
translate(x-value,y-value)方法平移示意图
5、transform:scale(x-axis,y-axis);是用于缩放元素大小,该函数依旧包含两个参数值,分别定义宽度和高度的缩放比例。
x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素,而是反转元素(如文字被反转),然后再缩放元素。如果第二个参数省略,则第二个参数等于第一个参数值。
transform:scale(x-axis,y-axis)缩放示意图
6、transform:skew(x-angle,y-angle)方法能够让元素倾斜,该函数包含两个参数值,分别用来定义X轴和Y轴坐标倾斜的角度。
参数x-angle和y-angle表示角度值,第一个参数表示相对于X轴进行倾斜,第二个参数表示相对于Y轴进行倾斜,如果省略了第二个参数,则取默认值0。
transform:skew(x-angle,y-angle)倾斜示意图
7、transform:rotate(angle);能够旋转指定的元素对象,主要是在二维空间内进行操作,该方法的参数允许使用负值,这时元素将逆时针旋转。
transform:rotate(angle)方法旋转示意图
8、改变中心点。变形操作都是以元素的中心点为基准进行的,如果需要改变这个中心点,可以使用transfrom-origin属性。
基本语法格式:
transform-origin: x-axis y-axis z-axis;三个参数默认值为50%、50%、0。各参数的具体含义如下表:
二、CSS动画:通过animation实现
1、创建动画:@keyframes
基本语法
@keyframes 动画名称{
keyframes-selector: {
CSS样式
}
}
keyframes-selector:关键帧选择器。可以是百分比、from、to,表示在指定关键帧时动画的位置, from和0%等价,表示动画开始的关键帧,to和100%等价,表示动画结束的关键帧。
2、应用动画:animation