css3.0新增属性学习_html/css_WEB-ITnose

    　　　　　　　　　　　　2D 转换（须在style里面定义）：位移，缩放，旋转，斜切（扭曲）

         转换---关键字：transform;

属性有：

1，  位移：translate（0px，0px）

属性值：（0px,0px）括号里跟两个值，用逗号分割，使元素沿x轴，y轴坐标位移，第二个值可以不给，如果不给则默认为0。

2，  缩放：scale（.5, .5）

属性值：（.5 , .5）括号里跟两个小数（百分数），用逗号分割，元素中心点做为缩放基点，

使元素沿x轴，y轴坐标按比例缩放，第二个值可以不给，如果不给则默认为0。

。

3，  旋转：rotate（5deg）或rotate（1rad）其中Rad：弧度，deg：度数。

以元素左上角为基点，按值并且顺时针旋转。

重置原点：transform-origin:0  0;

Origin后面跟两个number，使元素按x轴，y轴重置旋转原点。

4，  斜切（扭曲）：skew（1rad,1rad）

属性值：（1rad,1rad）括号里跟两个弧度值rad确定扭曲程度，其值分别对应x,y轴，其第二个值可以不提供，如不提供则默认为0。

 

过度（须在style里面定义）

         过度---关键字：transition   后面紧跟4个值 如：

Transition:[transition-property]||[transition-duration]||

[transition-timing-function]||[transition-delay];

即：transition: all 4s linear 2s;

其值含义分别为：

1，  property:检索或设置对象中的参与过度的属性，其取值范围有：

All（默认值）：所有可以进行过度的css属性。

None：不指定过度的css属性。

2，  duration：检索或设置对象过度的持续时间，其取值范围有：

time：指定对象过度的持续时间。

3，  timing-function：检索或设置对象中过度的动画类型，其取值范围有（列举5个）：

linear：线性过度。

Ease：平滑过度。

Ease-in：由慢到快。

Ease-out：由快到慢。

Ease-in-out：由慢到快再到慢。

4，  delay：检索或设置对象延迟延迟过度的时间，其取值范围有：

time：指定对象过度的时间。

下面是一个代码实现过度的实例：

	*{
	margin: 0;
	padding: 0;
	}
	.out {
	width: 800px;
	padding: 1px;
	background-color: #999999;
	}
	.out div {
	width: 100px;
	height: 100px;
	margin: 25px;
	background-color: #21bbca;
	font-size: 12px;
	text-align: center;
	line-height: 100px;
	}
	.inner1 {
	-webkit-transition: all 4s linear;
	}
	.inner2 {
	-webkit-transition: all 4s ease;
	}
	.inner3 {
	-webkit-transition: all 4s ease-in;
	}
	.inner4 {
	-webkit-transition: all 4s ease-out;
	}
	.inner5 {
	-webkit-transition: all 4s ease-in-out;
	}
	.out:hover div {
	margin-left: 75%;
	-webkit-transform: rotate(360deg);
	border-radius: 50%;
	}
	线性过渡
	平滑过渡
	由慢到快
	由快到慢
	由慢到快再到慢

 

动画

关键字：animation  属性值有：

1，  name：检索或设置对象所应用的动画名称，取值范围有：

none：不引用任何动画名称。

Identifier：定义一个或多个动画名称。

其必须与@keyframes配合使用，因为动画名由@keyframes提供

2，  duration：检索或设置动画的持续时间。

Time：时间。

                            3，-timing-function：检索或设置动画的过度类型。

                                     取值同过度同。

4,delay：检索或设置动画延迟的时间。

Time：时间。

5  count：检索或设置对象动画的循环次数。

                   Infinite：无限循环。

                   Number：指定动画的具体循环次数。

         6 ，direction：检索或设置对象动画在循环中的是否反向运动。

                   Normal：正常方向。

                   Alternate：正常与反向交替。