过渡与渐变

过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

①：指定要添加效果的CSS属性
②：指定效果的持续时间

如果未指定期限，transition将会没有任何效果，默认值是零，指定的css属性的值更改时效果会发生变化
多项改变：要添加多个样式的变换效果，添加的属性用逗号隔开

属性：

• transition：检索或设置过渡效果
• transition-property：过渡的属性，若值为all，则为全属性
• transform-duration: 过渡的时间
• transform-timing-function: 过渡效果
• transition-delay: 过渡的开始时间
• ease ease-in linear

css渐变

线性渐变：向上\向下\向左\向右\对角方向
径向渐变：由他们的中心定义
属性：

		linear-gradient
		radial-gradient
		repeating-radial-gradient
后边跟-webkit-、-moz-、-o-的数字指定了需加上前缀才能支持属性的第一个版本

线性渐变：至少定义两种颜色结点，同时也可以设置一个起点和一个方向或一个角度

语法：background:linear-gradient(direction,color-stop1,color-stop2,...);

线性渐变：从上到下（默认）

	#grad{
		background:-webkit-linear-gradient(red,blue);
		background:-o-linear-gradient(red,blue);
		background:-moz-linear-gradient(red,blue);
		background:linear-gradient(red,blue);
	}

线性渐变：从左到右
线性渐变：对角

语法：background:linear-gradient(angle,color-stop1,color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算
使用透明度（transparent）,创建减弱变淡的效果
重复的线性渐变：repeating-linear-gradient() 用于重复性的函数

径向渐变：由中心定义，两种颜色过渡，渐变中心，形状，大小
中心：center 形状：ellipse 大小：size

语法：background:radial-gradient(center,shape size,start-color,...,last-color);

size属性：

• closest-side
• farthest-side
• closest-corner
• farthest-corner
  重复的径向渐变：repeating-radial-gradient() 用于径向函数