CSS高级应用

一.过渡

1.transition-property属性

transition-property属性用于指定应用过渡效果的css属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。。基本语法格式如下：

transition-property:none | all | property;

属性值	描述
none	莫有属性会获得过渡效果
all	所有属性会获得过渡效果
property	用户指定应用过渡效果的css属性的名称，多个名称之间用逗号隔开。

<!--more-->

2.transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位为秒(s)或毫秒(ms)，其基本语法如下：

transition-duration:time;

3.transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线，默认为“ease”，其基本语法格式如下：

transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

属性值	描述
linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1))
ease	指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于 cubic-bezier(0.25,0.1,0.25,1)
ease-in	指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于 cubic-bezier(0.42,0,1,1)
ease-out	指定以慢速结束（淡出效果）的过渡效果，等同于 cubic-bezier (0,0,0.58,1)
ease-in-out	指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0，0.58，1)
cubic-bezier(n,n,n,n)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1

4.transition-delay属性

transition-delay属性规定过渡效果从何时开始，默认值为0，其语法格式为：

transition-delay:time;

5.transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property，transition-duration，transition-timing-function，transition-delay四个过度属性，其语法格式如下：

transition: property duration timing-function delay;

注：

参数必须按照此顺序，不能颠倒。

二.变形

1.认识transform

CSS3的变形属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动，旋转和缩放。其基本语法如下：

transform:none | transform-functions;

上述语法格式中，transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。

1.matrix():定义矩形变换，即基于X和Y坐标重新定位元素的位置。

2.translate():移动元素对象，即基于X和Y坐标重新定位元素。

3.scale():缩放元素对象，可以是任意元素对象尺寸发生变化，取值包括正数，负数和小数。

4.rotate();旋转元素对象，取值为一个度数值。

5.skew();倾斜元素对象，取值为一个度数值。

2.2D转换

1.平移

使用translate()方法能重新定义元素的坐标，实现平移效果。其基本语法格式如下：

transform:translate (x-value,y-value);

2.缩放

scale()方法用于缩放元素大小，该函数包含两个参数值。其基本语法格式如下：

transform:scale(x-axis,y-axis);

3.倾斜

skew()方法能狗让元素倾斜显示，基本如法格式如下：

transform:skew(x-axis,y-axis);

4.旋转

rotate()方法能够旋转指定元素对象，当传入负值时，逆时针旋转。其基本语法格式如下：

transform:rotate(angle);

5.更改变换的中心点

通过transform设置的属性都是以元素的中心点为基准进行的，如果需要改变这个中心的，可以使用transform-origin属性，其基本语法元素如下：

transform-origin:x-axis y-axis z-axis;

参数	描述
x-axis	定义视图被置于X轴的何处，可能的值为：1.left 2.center 3.right 4.length 5.%
y-axis	定义视图被置于Y轴的何处，可能的值为：1.top 2.center 3.bottom 4.length 5.%
z-axis	定义视图被置于Z轴的何处，可能的值为：1.length

3.3D旋转

1.rotateX()方法

rotateX()函数用于指定元素围绕X轴旋转，其基本语法元素如下：

rotate:rotateX(a);

2.rotateY()方法

rotateY()函数用于指定元素围绕X轴旋转，其基本语法元素如下：

rotate:rotateY(a);

3.rotate3D()方法

其基本语法元素如下：

rotate3d:(x,y,z,angle);

属性名称	描述
transform	向元素应用2D或3D转换
transform-origin	允许改变被转换元素的位置
transform-style	规定被嵌套元素如何在3D空间中显示
perspective	规定3D元素中的透视效果
perspective-origin	规定3D元素的底部位置
perspective-visibility	定义元素在不面对屏幕时是否可见

3.动画

1.@keyframes

使用动画之前必须先定义一个关键帧，一个关键帧表示一个动画过程中的一个状态。其语法格式如下：

@keyframes animationname{
		@keyframes-selector{css-styles;}
}

1.animationname:表示当前动画的名称，不能为空。

2.@keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画中的位置，值可以是百分比，from或者to。

3.css-styles:定义执行到当前动画帧是对应的动画状态，多个属性间用分号分隔。

2.animation-name：属性

animation-name属性用于定义要应用的动画名称，为@keyframes动画规定名称。其基本语法格式如下：

animation-name:keyframename | none;

适用于所有块内元素和行内元素。

3.animation-duration属性

animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计，其基本语法格式如下：

animation-duration:time;

4.animation-timing-function属性

animation-timing-function属性用来规定动画速度的曲线，可以定义使用哪种方式来执行动画效果。基本语法格式如下：

animation-timing-function:value;

属性值	描述
linear	动画从头到尾的速度是相同的
ease	默认。动画以低速开始，然后加快，以慢速结尾
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在该函数中自己的值。可能的值是从0到1的数值

5.animation-delay属性

animation-delay属性用于定义执行动画效果之前延迟的时间，及动画神魔时候开始。基本语法为：

animation-delay:time;

6.animation-iteration-count属性

animation-iteration-count属性用于定义动画的播放次数，基本语法为：

animation-iteration-count:number | infinite;

7.animation-direction属性

animation-direction属性定义当前动画的播放方向，及动画播放完成后是否逆向交替循环，基本语法格式为：

animation-direction:normal | alternate;

8.animation 属性

将所有属性放在一起定义，其基本语法格式为：

anmiation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

必须指定animation-name和animation-duration属性，否则持续时间为0，永远不会动画播放。