赵工的个人空间

CSS3动画与渐变

CSS3允许往页面上添加动态效果，包括CSS变形、CSS过渡、CSS动画等，甚至可以实现3D变换。

1. CSS3变形：

1)transform属性：

可用于元素的变形，实现元素的旋转、缩放、移动、倾斜等效果。语法：
transform:none|<transform-function>;
其中，none为默认值，不设置元素变形；<transform-function>设置一个或多个变形函数，包括旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()等。设置多个变形函数时用空格间隔。
元素在变形过程中，仅元素的显示效果变形，实际尺寸并不会因为变形而改变。元素变形后可能超出原有的限定边界，但不会影响自身尺寸及其他元素的布局。
①rotate()函数：
rotate()函数用于定义元素在二维空间的旋转。语法：
rotate(<angle>)
参数<angle>表示旋转角度，单位deg。正值表示顺时针旋转，负值表示逆时针旋转。示例：
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
-ms-transform:rotate(30deg);
transform:rotate(30deg);
②scale()函数：
用于定义元素在二维空间的缩放和翻转。语法：
Scale(<x>,<y>)
参数<x>表示元素在水平方向上的缩放倍数；<y>表示元素在垂直方向上的缩放倍数。值可以是整数、负数、小数，取值的绝对值大于1时表示放大，绝对值小于1时表示缩小，取值为负数时元素会被翻转。如果<y>值省略，则表明垂直方向上的缩放倍数与水平方向上的一样。
-webkit-transform:scale(0.8,-1.5);
-moz-transform:scale(0.8,-1.5);
-o-transform:scale(0.8,-1.5);
-ms-transform:scale(0.8,-1.5);
transform:scale(0.8,-1.5);
③translate()函数：
用于定义元素在二维空间的偏移。语法：
translate(<dx>,<dy>)
参数<dx>表示元素在水平方向上的偏移距离；<dy>表示元素在垂直方向上的偏移距离。值为带单位的数值，可以为负值和小数值。取值大于0则表示向右或向下偏移，取值小于0则表示向左或向上偏移。如果<dy>省略，表示垂直方向的偏移距离默认为0。
-webkit-transform:translate(10px,5px);
-moz-transform:translate(10px,5px);
-o-transform:translate(10px,5px);
-ms-transform:translate(10px,5px);
transform:translate(10px,5px);
④skew()函数：
用于定义元素在二维空间的倾斜变形。语法：
skew(<angleX>,<angleY>)
参数<angleX>表示元素在空间x轴上的倾斜角度；<angleY>表示元素在空间y轴上的倾斜角度。值为带有角度单位deg的数值，值为正表示顺时针旋转，值为负表示逆时针旋转。如果<angleY>省略，表示垂直方向上的倾斜角度为0deg。
-webkit-transform:skew(-30deg,10deg);
-moz-transform:skew(-30deg,10deg);
-o-transform:skew(-30deg,10deg);
-ms-transform:skew(-30deg,10deg);
transform:skew(-30deg,10deg);
⑤matrix()函数：
用于定义元素在二维空间的矩阵变换。语法：
matrix(<m11>,<m12>,<m21>,<m22>,<dx>,<dy>)
6个参数组成一个变形矩阵，与当前元素旧的参数组成的矩阵进行乘法运算，形成新的矩阵。该变形矩阵的形式如下：
  |m11  m21  dx|
  |m12  m22  dy|
  |0     0     1|
-webkit-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-moz-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-o-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-ms-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
transform:matrix(0.866,0.5,0.5,-0.866,10,10);
⑥同时使用多个变形函数：
-webkit-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-moz-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-o-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-ms-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
transform:translate(10px,10px) rotate(30deg) scale(1,-1);
同样是使用变形函数及相同参数，如果顺序不同，变形的结果也可能不同。

2)transform-origin属性：

变形属性transform默认的变形原点是元素对象的中心点，transform-origin属性可用于指定这个原点的位置。语法：
transform-origin:<x-axis> <y-axis>
参数<x-axis>定义变形原点的横坐标位置，默认值50%，取值包括left、center、right、百分比值、长度值；<y-axis>定义变形原点的纵坐标位置，默认值50%，取值包括top、middle、bottom、百分比值、长度值。
其中，百分比是相对于元素对象的宽度和高度而言，而该坐标位置的计算是以元素的左上角为坐标原点进行计算。
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;

2.CSS3过渡：

过渡效果可以让元素变形看起来比较平滑，主要就是transition属性。
transition属性可以实现元素变换过程中的过渡效果，即实现了基本的动画。语法：
transition:transition-property||transition-duration||transition-time-function||transition-delay;
其中，transition-property定义用于过渡的属性；transition-duration定义过渡过程需要的时间；transition-time-function定义过渡方式；transition-delay定义开始过渡的延迟时间。
此属性定义一组过渡效果，可以同时定义两组或两组以上的过渡效果，每组用逗号分隔。
-webkit-transition:all 1000ms linear 500ms;
-moz-transition:all 1000ms linear 500ms;
-o-transition:all 1000ms linear 500ms;
transition:all 1000ms linear 500ms;
Transition属性常与元素变形属性一起使用，可以展现元素变形过程，实现动画的效果。
Transition属性是一个复合属性，包括4个子属性：
①transition-property子属性：
用于定义过渡的属性。语法：
transition-property:none|all|<property>;
参数none表示没有任何CSS属性有过渡效果；all为默认值，表示所有的CSS属性都有过渡效果；<property>指定一个用逗号分隔的多个属性，针对指定的属性有过渡效果。示例：
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-o-transition-property:-o-transform;
transition-property:transform;
使用transition-property指定了变形属性，没有指定背景属性，所以变换中的过渡效果，只有变形的过渡，背景的变换没有过渡。
②transition-duration子属性：
用于定义过渡过程中需要的时间。语法：
transition-duration:<time>;
参数<time>指定用逗号分隔的多个时间，单位可以是s或ms。默认情况下为0，即看不到过渡效果。
-webkit-transition-duration:4s,1s;
-moz-transition-duration:4s,1s;
-o-transition-duration:4s,1s;
transition-duration:4s,1s;
上述代码，指定了两个过渡时间，分别对应过渡属性中的两个转换。
③transition-delay子属性：
用于定义过渡的延迟时间。语法：
transition-delay:<time>;
参数<time>指定逗号分隔的多个时间值，单位可以是s或ms。默认为0，即没有延迟。时间可以是负值，但过渡效果会从该时间点开始，之前的过渡效果将被截断。
④transition-time-function子属性：
用于定义过渡的速度曲线，即过渡方式。语法：
transition-time-function:ease|linear|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的数字。示例：
-webkit-transition-time-function:ease-out;
-moz-transition-time-function:ease-out;
-o-transition-time-function:ease-out;
transition-time-function:ease-out;

3. CSS3动画：

元素变形和过渡是制作动画的基础，但还不是真正的动画。CSS3动画，不仅可以创建动画关键帧，还可以对关键帧动画设置播放时间、播放次数、播放方向等。

1)@keyframes规则：

动画，是通过从一种样式逐步转变到另一种样式来创建的。在指定CSS样式变化时，可以从0%到100%，逐步设计样式表的变化。
@keyframes规则的语法为：
@keyframes<animationname> {<keyframes-selector>{<css-styles>}}
其中，<animationname>是动画的名称，便于与动画属性绑定；<keyframes-selector>表示动画持续时间的百分比，也可以是fron和to，from对应0%，to对应100%，必须定义一个；<css-styles>设置的一个或多个合法的样式属性，必须定义一些样式。
示例：变换位置的小球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变换位置的小球</title>
<style type="text/css">
div {
   position:absolute;
   -moz-animation:mymove 5s infinite;
   -webkit-animation:mymove 5s infinite;
}
@-moz-keyframes mymove {
   0% {top:0px;}
   25% {top:200px;left:200px}
   75% {top:50px;left:10px}
   100% {top:100px;left:60px}
}
@-webkit-keyframes mymove {
   0% {top:0px;}
   25% {top:200px;left:200px}
   75% {top:50px;left:10px}
   100% {top:100px;left:60px}
}
</style>
</head>
<body>
<div><img src="image/point.png" width="30" height="30"></div>
</body>
</html>
上述代码中，创建了名为mymove的关键帧动画，并绑定到小球所在的元素中。

2)animation属性：

animation属性专门用于动画设计，可以把一个或多个关键帧动画绑定到元素上，同时定义动画所需要的完整信息。语法：
animation:<name> <duration> <time-function> <delay> <iteration-count> <direction>
其中，<name>定义动画的名称，绑定指定的关键帧动画；<duration>定义动画播放的周期时间；<time-function>定义动画的播放方式，即速度曲线；<delay>定义动画的延迟时间；<iteration-count>定义动画应该播放的次数；<direction>定义动画播放的顺序方向。
animation属性可以定义一个动画的6个方面的参数信息，还可以同时定义对个动画，每个动画的参数信息为一组，用逗号分隔开。
animation属性是一个复合属性，包含animation-name、animation-duration、animation-timing -function、animation-delay、animation-iteration-count、animation-direction子属性。
①animation-name子属性：
用来定义动画的名称。该名称是一个关键帧名称，由@keyframes规则定义。语法：
animation-name:<keyframename>|none;
参数none为默认值，表示没有动画；<keyframename>指定名称对应的动画关键帧。可以同时指定多个名称，之间用逗号分隔。如果需要，可以使用none，取消任何动画。
②animation-duration子属性：
用来定义动画播放的周期时间。语法：
animation-duration:<time>;
参数<time>用于指定播放动画的时间长度，单位m或ms。默认为0，表示没有动画。
③animation-timing-function子属性：
用来定义动画的播放方式。语法：
animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
参数的含义与transition-timing-function属性的参数一致。
④animation-delay子属性：
用来定义动画播放的延迟时间。语法：
animation-delay:<time>;
参数<time>用于指定播放动画的时间长度，单位s或ms。默认值为0，表示没有延迟。
⑤animation-iteration-count子属性：
用来定义动画循环播放的次数。语法：
animation-iteration-count:infinite|<n>;
参数infinite表示无限次播放下去；<n>表示循环播放次数的数字，默认为1。
⑥animation-direction子属性：
用来定义动画循环播放的方向。语法：
animation-direction:normal|alternate;
参数normal为默认值，表示按照关键帧设定的动画方向播放；alternate表示动画的播放方向与上一次播放周期相反。
示例：给元素同时指定多个关键帧
关键帧动画：
@-moz-keyframes mymove {
   50% {top:50px;left:100px;background-color:#00f;}
}
@-webkit-keyframes mymove {
   50% {top:50px;left:100px;background-color:#00f;}
}
@-moz-keyframes myrotate {
   100% {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes myrotate {
   100% {-webkit-transform:rotate(360deg);}
}
动画绑定：
div {
   position:absolute;
   width:100px;
   height:100px;
   top:50px;
   left:100px;
   background-color:#f90;
   -moz-animation-name:mymove,myrotate;
   -webkit-animation-name:mymove,myrotate;
   -moz-animation-iteration-counter:infinite;
   -webkit-animation-iteration-counter:infinite;
   -moz-animation-timing-function:linear;
   -webkit-animation-timing-function:linear;
   -moz-animation-duration:4s 3s;
   -webkit-animation-duration:4s 3s;
}
上述代码，定义了2个关键帧动画，分别是移动变换背景和旋转变换。在animation属性中同时指定了这2个关键帧动画，并设置了不同的动画播放周期时间。

4. CSS 3D变换：

3D图形使用三维坐标系统，第3个坐标轴z表示距离屏幕位置的远近，依此创建深度感。CSS的3D坐标系统的y轴是向下的，以与Web浏览器的2D坐标系统一致。
1）3D变换：
translate通过设置transform属性来指定一个CSS3D变换，变换方法为：

方法	描述
translateX(x)	沿x轴平移
translateY(y)	沿y轴平移
translateZ(z)	沿z轴平移
translate3d(x,y,z)	沿x、y、z三轴平移
rotateX(angle)	绕x轴旋转
rotateY(angle)	绕y轴旋转
rotateZ(angle)	绕z轴旋转
rotate3d(x,y,z,angle)	绕x、y、z三轴旋转
scaleX(angle)	沿x轴缩放
scaleY(angle)	沿y轴缩放
scaleZ(angle)	沿z轴缩放
scale3d(x,y,z)	沿x、y、z三轴缩放
matrix3d(...)	用16个数值定义任意的4x4变换矩阵
perspective(depth)	定义透视投影的深度像素值

CSS支持一个额外的属性transform-origin，用来指定变换的原点，默认值是50% 50% 0，即坐标轴的原点，通过修改这个属性可以让物体围绕非中心点旋转，可以使用任意的CSS偏移单位来指定，如left、center、right、%，或者一个CSS距离值，px、em等为单位。
因为变换特性还在试验节段，使用时需要加上前缀，示例：
.rotate{
  -webkit-transform:rotateY(30deg);
  -moz-transform:rotateY(30deg);
  -o-transform:rotateY(30deg);
  transform:rotateY(30deg);
}
旋转值可以被指定为角度、弧度或百分度，单位分别为deg、rad、grad。可以通过为一个div设置多个属性来应用变换，如：
<div class="card translate">......</div>
2）增加透视：
CSS3定义透视投影很简单。示例：
.perspective{
  -webkit-perspective:400px;
  -moz-perspective:400px;
  -o-perspective:400px;
  perspective:400px;
}
.noperspective{
  -webkit-perspective:0px;
  -moz-perspective:0px;
  -o-perspective:0px;
  perspective:0px;
}
代码定义了一个CSS类perspective，用于希望应用透视投影的元素，提供的值代表从视口平面到xy平面的距离。透视可以使用任意的CSS距离单位来定义，如像素、点、英寸、em等等。还定义了noperspective类，用于清除元素上原先可能带有的透视，其中的透视值设为默认值0，即无透视。
CSS还有一个perspective-origin属性，用来指定xy坐标系中透视的消失点。
3）创建变换层级：
CSS3允许3D变换通过DOM对象层级继承。一个带3D变换的元素可以选择继承或不继承其祖先元素的变换，具体取决于transform-style属性的值。
可以定义两个类：
.hierarchy{
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.nohierarchy{
  -webkit-transform-style:flat;
  -moz-transform-style:flat;
  -o-transform-style:flat;
  transform-style:flat;
}
transform-style属性有两个值，默认flat，指定后代DOM元素不会应用父元素的变换；preserve-3d则将父级元素的变换应用于后代元素。通过在整个应用中使用preserve-3d，可以创建一个3D物体的深度层次。
有些浏览器，如Firefox，不会将transform-style属性层层传播下去，必须为每个后代元素显式指定；而webkit浏览器则会层层传递。
4）控制背面渲染：
在传统的3D渲染中，当一个多边形背向观察者时，渲染系统可以选择显示或者不显示该多边形的背面backface，取决于设置。CSS3变换同样提供这项功能，如果一个元素旋转至背面朝前，会基于backface-visibillity变换属性来决定是否显示。
CSS3背面渲染对于构建双面物体非常重要，假设需要创建一个屏幕翻转过渡效果：
.frontside{
  -webkit-transform:rotateY(210deg);
  -moz-transform:rotateY(210deg);
  -o-transform:rotateY(210deg);
  transform:rotateY(210deg);
  box-shadow:2px 2px 2px black;
  background-color:darkcyan;
  color:white;
}
.backside{
  -webkit-transform:rotateY(30deg);
  -moz-transform:rotateY(30deg);
  -o-transform:rotateY(30deg);
  transform:rotateY(30deg);
  box-shadow:2px 2px 2px black;
  background-color:darkred;
  color:white;
  opacity:0.8;
}
.backface{
  -webkit-backface-visibility:visible;
  -moz-backface-visibility:visible;
  -o-backface-visibility:visible;
  backface-visibility:visible;
}
.nobackface{
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden;
  backface-visibility:hidden;
}
5）CSS 3D过渡：
CSS过渡允许属性随时间渐进地变化，可以用于多数的CSS属性，如width、position、color、z-index、opacity等，语法为：
transition:property-name duration timing-function delay-time;
其中，property-name为属性名，关键字all表示过渡将应用于全部产生变化的属性，而关键字none表示过渡将不应用于任何属性；duration表示以秒或毫秒为单位的时间值，指定过渡时长；timing-function用于过渡动画的补间函数名，可以是linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier；delay-time指定过渡开始之前等待的时间长度，以秒或毫秒为单位。
transition实际上是4个独立的CSS属性的简写，分别为transition-property、transition-duration、transition-timing-function、transition-delay。
CSS示例为：
.easeAll2sec{
  -webkit-transition:all 2s;
  -moz-transition:all 2s;
  -o-transition:all 2s;
  transition:all 2s;
}
.easeTransform2secColor5secDelay{
  -webkit-transition:-webkit-transform 2s,background-color 5s linear 2s;
  -moz-transition:-moz-transform 2s,background-color 5s linear 2s;
  -o-transition:-o-transform 2s,background-color 5s linear 2s;
  transition:transform 2s,background-color 5s linear 2s;
}
为了使用上述CSS，可以为div元素定义为多个类，示例：
<div class="card nobackface backside clickable easeAll2sec">...</div>
<div class="card nobackface backside clickable easeTransform2secColor5secDelay">...</div>
还可以使用JavaScript代码动态设置class：
$('.clickable').click(function(){
  $('#front1').addClass('flip');
  front1=!front1;
});
6）CSS动画：
CSS动画提供了比CSS过渡更全面的动画方案，它利用一系列关键帧和属性来控制动画时长、缓动函数、延时、循环。
用于创建动画的CSS分为两部分，一个用于创建关键帧数据的CSS代码块的@keyframe规则，以及可定义于单个元素上的许多属性：

属性	说明
animation-name	一个由@keyframe规则定义的关键帧集合的名字
animation-duration	指定动画的时长，以秒或毫秒为单位
animation-time-function	关键帧动画的缓动函数名
animation-delay	指定动画开始前等待的一段时间，以秒或毫秒为单位
animation-iteration-count	指定动画播放的次数，默认1，infinite定义永久循环
animation-direction	值有normal、reverse、alternate，分别表示动画是正向、反向还是正反向交替播放

可以用CSS属性简写animation，示例：
animation:name duration timing-function delay iteration-count direction;
示例：
@-webkit-keyframes kfRotateY{
  from{
    -webkit-transform:rotateY(0deg);
  }
  to{
    -webkit-transform:rotateY(360deg);
  }
}
.animRotateY{
  -webkit-animation-duration:2s;
  -webkit-animation-name:kfRotateY;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-time-function:linear;
}
@-webkit-keyframes kfRotateMinusY{
  from{
    -webkit-transform:rotateY(0deg);
  }
  to{
    -webkit-transform:rotateY(360deg);
  }
}
.animRotateMinusY{
  -webkit-animation-duration:2s;
  -webkit-animation-name:kfRotateMinusY;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-time-function:linear;
}
@-webkit-keyframes kfShade{
  0%{
    -webkit-transform:translate3d(0,0,0) rotateZ(0deg);
  }
  25%{
    -webkit-transform:translate3d(0,-20px,0) rotateZ(20deg);
  }
  50%{
    -webkit-transform:translate3d(0,0,0) rotateZ(-20deg);
  }
  100%{
    -webkit-transform:translate3d(0,-20px,0) rotateZ(-20deg);
  }
}
.animShake{
  -webkit-animation-duration:.5s;
  -webkit-animation-name:kfShake;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-time-function:ease-in-out;
}
@-webkit-keyframes kfFly{
  0%{
    -webkit-transform:translate3d(0,0,0);
  }
  25%{
    -webkit-transform:translate3d(100px,-100px,20px);
  }
  50%{
    -webkit-transform:translate3d(200px,-200px,40px);
  }
  100%{
    -webkit-transform:translate3d(400px,-300px,20px);
  }
}
.animFly{
  -webkit-animation-duration:.5s;
  -webkit-animation-name:kfFly;
  -webkit-animation-iteration-count:2;
  -webkit-animation-time-function:cubic-bezier(0.1, 0.2, 0.8, 1);
  -webkit-animation-direction:alternate;
}
还可以在JavaScript中使用代码：
$('#front1').click(function(){
  $('#front1).addClass('animRatateY');
  setTimeout(function(){
    $('#front1').removeClass('animRotateY');
  },2000);
});

5. 渐变：

渐变，可以让元素看起来更有质感，CSS3能方便地实现元素的渐变。渐变分线性渐变和径向渐变。

1)线性渐变：

①基于webkit内核的线性渐变语法：
-webkit-gradient(linear,<point>,<point>,from(<color>),to(<color>)
            [,color-stop(<percent>,<color>)]*)
其中，linear表示线性渐变；<point>定义渐变的起点和终点，支持数值、百分比和关键字，关键字包括定义横坐标的left、right和定义纵坐标的top、bottom；<color>表示任意CSS颜色；<percent>表示百分比，用于确定起点和终点之间的某个位置；from定义起点的颜色；to定义终点的颜色；color-stop在渐变中多次添加过渡颜色，可以实现多种颜色的渐变。
②基于gecko内核的线性渐变语法：
-moz-linear-gradient([<point>||<angle>,]?<color>[,<color>[<percent>]?]*,<color>)
其中，<point>定义渐变的起点，支持数值、百分比和关键字，关键字包括定义横坐标的left、center、right和定义纵坐标的top、center、bottom，默认为top center，指定一个值时另一个值默认center；<angle>定义线性渐变的角度，单位可以是deg、grad、rad，即角度、梯度、弧度；<color>表示渐变使用的CSS颜色值；<percent>表示百分比，用于确定起点和终点之间的某个位置。
第一个颜色值为渐变开始的颜色，最后一个颜色为渐变结束的颜色。
示例：
background:-webkit-grandient(linear,left top,left bottom,from(#f90),to(#0f0));
background:-moz-linear-grandient(left,#f90,#0f0);
上述样式实现的是一个从上到下的线性渐变。实现从左到右的渐变样式为：
background:-webkit-grandient(linear,left top,right top,from(#f90),to(#0f0));
background:-moz-linear-grandient(top,#f90,#0f0);
从左上角到右下角的渐变样式为：
background:-webkit-grandient(linear,left top,right bottom,from(#f90),to(#0f0));
background:-moz-linear-grandient(left top,#f90,#0f0);
渐变中增加过渡颜色的样式：
background:-webkit-grandient(linear,left top,right top,from(#f90),to(#0f0),color-stop(50%,blue));
background:-moz-linear-grandient(top,#f90,blue,#0f0);
基于IE内核的渐变是借助滤镜实现的。

2)径向渐变：

①基于webkit内核的径向渐变语法：
-webkit-gradient(radial[,<point>,<radius>]{2},from(<color>),to(<color>)[,color-stop(<percent>,<color>)]*)
其中，radial表示径向渐变；<point>定义渐变的起始圆的圆心坐标和结束圆的圆心坐标，坐标点取值支持数值、百分比和关键字，关键字包括定义横坐标的left、right和定义纵坐标的top、bottom；<radius>表示圆的半径，定义起始圆的半径和结束圆的半径，默认为元素尺寸的一半；<color>表示任意CSS颜色；<percent>表示百分比值，用于确定起点和终点之间的某个位置；from定义起始圆的颜色；to定义结束圆的颜色；color-stop在渐变中多次添加过渡颜色，可以实现多种颜色的渐变。
②基于gecko内核的径向渐变语法：
-moz-radial-gradient([<point>||<angle>,]?[<shape>||<radius>]?<color>[,<color>[<percent>]?]*,<color>)
其中，<point>定义渐变的起点，支持数值、百分比和关键字，关键字包括定义横坐标的left、center、right和定义纵坐标的top、center、bottom，默认坐标center center，当指定一个值时另一个值默认为center；<angle>定义径向渐变的角度，单位为deg、grad、rad，分别表示角度、梯度、弧度；<shape>定义径向渐变的形状，包括circle和ellipse，默认为ellipse；<radius>定义圆的半径或椭圆的轴长；<color>表示渐变使用的CSS颜色值；<percent>表示百分比，用于确定起始圆和结束圆之间的某个位置。
第一个颜色值为渐变开始的颜色，最后一个颜色值为渐变结束的颜色。
示例：
background:-webkit-grandient(radial, 200 100, 10, 200 100, 100, from(#f90), to(#0f0), color-stop(50%,blue));
background:-moz-radial-grandient(200px 100px,circle,#f90 10px,blue,#0f0 100px);
上述样式代码，实现了从小圆到大圆的径向渐变，渐变过程中增加了蓝色为过渡颜色。使用-webkit-grandient()可以轻松实现放射效果，而-moz-radial-gradient()可以轻松实现椭圆效果。复杂的渐变，很难同时实现，所以实际使用中比较受限。