html渐变显示动画效果,CSS3动画与渐变

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

1. CSS3变形：

1)transform属性：

可用于元素的变形，实现元素的旋转、缩放、移动、倾斜等效果。语法：

transform:none|;

其中，none为默认值，不设置元素变形；设置一个或多个变形函数，包括旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()等。设置多个变形函数时用空格间隔。

元素在变形过程中，仅元素的显示效果变形，实际尺寸并不会因为变形而改变。元素变形后可能超出原有的限定边界，但不会影响自身尺寸及其他元素的布局。

①rotate()函数：

rotate()函数用于定义元素在二维空间的旋转。语法：

rotate()

参数表示旋转角度，单位deg。正值表示顺时针旋转，负值表示逆时针旋转。示例：

-webkit-transform:rotate(30deg);

-moz-transform:rotate(30deg);

-o-transform:rotate(30deg);

-ms-transform:rotate(30deg);

transform:rotate(30deg);

②scale()函数：

用于定义元素在二维空间的缩放和翻转。语法：

Scale(,)

参数表示元素在水平方向上的缩放倍数；表示元素在垂直方向上的缩放倍数。值可以是整数、负数、小数，取值的绝对值大于1时表示放大，绝对值小于1时表示缩小，取值为负数时元素会被翻转。如果值省略，则表明垂直方向上的缩放倍数与水平方向上的一样。

-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(,)

参数表示元素在水平方向上的偏移距离；表示元素在垂直方向上的偏移距离。值为带单位的数值，可以为负值和小数值。取值大于0则表示向右或向下偏移，取值小于0则表示向左或向上偏移。如果省略，表示垂直方向的偏移距离默认为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(,)

参数表示元素在空间x轴上的倾斜角度；表示元素在空间y轴上的倾斜角度。值为带有角度单位deg的数值，值为正表示顺时针旋转，值为负表示逆时针旋转。如果省略，表示垂直方向上的倾斜角度为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(,,,,,)

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:

参数定义变形原点的横坐标位置，默认值50%，取值包括left、center、right、百分比值、长度值；定义变形原点的纵坐标位置，默认值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|;

参数none表示没有任何CSS属性有过渡效果；all为默认值，表示所有的CSS属性都有过渡效果；指定一个用逗号分隔的多个属性，针对指定的属性有过渡效果。示例：

-webkit-transition-property:-webkit-transform;

-moz-transition-property:-moz-transform;

-o-transition-property:-o-transform;

transition-property:transform;

使用transition-property指定了变形属性，没有指定背景属性，所以变换中的过渡效果，只有变形的过渡，背景的变换没有过渡。

②transition-duration子属性：

用于定义过渡过程中需要的时间。语法：

transition-duration:;

参数指定用逗号分隔的多个时间，单位可以是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:;

参数指定逗号分隔的多个时间值，单位可以是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 {{}}

其中，是动画的名称，便于与动画属性绑定；表示动画持续时间的百分比，也可以是fron和to，from对应0%，to对应100%，必须定义一个；设置的一个或多个合法的样式属性，必须定义一些样式。

示例：变换位置的小球

变换位置的小球

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}

}

上述代码中，创建了名为mymove的关键帧动画，并绑定到小球所在的元素中。

2)animation属性：

animation属性专门用于动画设计，可以把一个或多个关键帧动画绑定到元素上，同时定义动画所需要的完整信息。语法：

animation:

其中，定义动画的名称，绑定指定的关键帧动画；定义动画播放的周期时间；定义动画的播放方式，即速度曲线；定义动画的延迟时间；定义动画应该播放的次数；定义动画播放的顺序方向。

animation属性可以定义一个动画的6个方面的参数信息，还可以同时定义对个动画，每个动画的参数信息为一组，用逗号分隔开。

animation属性是一个复合属性，包含animation-name、animation-duration、animation-timing -function、animation-delay、animation-iteration-count、animation-direction子属性。

①animation-name子属性：

用来定义动画的名称。该名称是一个关键帧名称，由@keyframes规则定义。语法：

animation-name:|none;

参数none为默认值，表示没有动画；指定名称对应的动画关键帧。可以同时指定多个名称，之间用逗号分隔。如果需要，可以使用none，取消任何动画。

②animation-duration子属性：

用来定义动画播放的周期时间。语法：

animation-duration:;

参数用于指定播放动画的时间长度，单位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:;

参数用于指定播放动画的时间长度，单位s或ms。默认值为0，表示没有延迟。

⑤animation-iteration-count子属性：

用来定义动画循环播放的次数。语法：

animation-iteration-count:infinite|;

参数infinite表示无限次播放下去；表示循环播放次数的数字，默认为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设置多个属性来应用变换，如：

......

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元素定义为多个类，示例：

...

...

还可以使用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,,,from(),to()

[,color-stop(,)]*)

其中，linear表示线性渐变；定义渐变的起点和终点，支持数值、百分比和关键字，关键字包括定义横坐标的left、right和定义纵坐标的top、bottom；表示任意CSS颜色；表示百分比，用于确定起点和终点之间的某个位置；from定义起点的颜色；to定义终点的颜色；color-stop在渐变中多次添加过渡颜色，可以实现多种颜色的渐变。

②基于gecko内核的线性渐变语法：

-moz-linear-gradient([||,]?[,[]?]*,)

其中，定义渐变的起点，支持数值、百分比和关键字，关键字包括定义横坐标的left、center、right和定义纵坐标的top、center、bottom，默认为top center，指定一个值时另一个值默认center；定义线性渐变的角度，单位可以是deg、grad、rad，即角度、梯度、弧度；表示渐变使用的CSS颜色值；表示百分比，用于确定起点和终点之间的某个位置。

第一个颜色值为渐变开始的颜色，最后一个颜色为渐变结束的颜色。

示例：

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[,,]{2},from(),to()[,color-stop(,)]*)

其中，radial表示径向渐变；定义渐变的起始圆的圆心坐标和结束圆的圆心坐标，坐标点取值支持数值、百分比和关键字，关键字包括定义横坐标的left、right和定义纵坐标的top、bottom；表示圆的半径，定义起始圆的半径和结束圆的半径，默认为元素尺寸的一半；表示任意CSS颜色；表示百分比值，用于确定起点和终点之间的某个位置；from定义起始圆的颜色；to定义结束圆的颜色；color-stop在渐变中多次添加过渡颜色，可以实现多种颜色的渐变。

②基于gecko内核的径向渐变语法：

-moz-radial-gradient([||,]?[||]?[,[]?]*,)

其中，定义渐变的起点，支持数值、百分比和关键字，关键字包括定义横坐标的left、center、right和定义纵坐标的top、center、bottom，默认坐标center center，当指定一个值时另一个值默认为center；定义径向渐变的角度，单位为deg、grad、rad，分别表示角度、梯度、弧度；定义径向渐变的形状，包括circle和ellipse，默认为ellipse；定义圆的半径或椭圆的轴长；表示渐变使用的CSS颜色值；表示百分比，用于确定起始圆和结束圆之间的某个位置。

第一个颜色值为渐变开始的颜色，最后一个颜色值为渐变结束的颜色。

示例：

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()可以轻松实现椭圆效果。复杂的渐变，很难同时实现，所以实际使用中比较受限。