您现在的位置是：首页 > 前端学习 > Web前端Web前端

动画和渐变（第十七章）(图文)

第十三双眼睛2020-03-14【Web前端】人已围观

简介在网页设计中，适当的使用动画和渐变，可以把网页设计的更加生动和友好，在传统的设计中，会借助Flash或者javascrip实现动画，借助图片实现渐变，而CSS仅仅是静态的表现元素的效果，不过，CSS3将改变我们的思维方式，因动画和渐变也可以直接用CSS来实现了，这些革命性的改变，使得CSS具有更加强大的可能性
本章知识点如下：
1CSS3变形基础
2CSS3过度效果
3CSS3动画效果
4CSS3变形设计

元素的变形-transform属性
CSS3新增的transform属性，可用于元素的变形，实现元素的旋转，缩放，移动，倾斜等变形效果，基于webkit的替代属性是-webkit-transform,基于gecko内核的替代属性是-moz-transform，基于presto的替代属性是-o-transform,ie浏览器的替代属性是-ms-transform,语法如下：
transform:none transform-functions
none:默认值，不设置元素变形。
transform-functions:设置一个或者多个变形函数，变形函数包括rotate(),缩放scale,移动translate,倾斜skew,矩阵变形hatrix等，设置多个变形函数时，用空格间隔，元素在变形过程中，仅显示效果变形，实际尺寸并不会改变，所以元素变形后，可能会超出原有的限定边界，但不会影响自身尺寸及其他元素的布局。

旋转
rotate函数用于定义元素在二维空间的旋转，函数的使用语法如下：
rotate(angle)
参数说明：angle表示旋转的角度，为带有角度单位标识符的数值，角度单位是deg,值为正时，表示顺时针旋转，值为负时，表示逆时针旋转。
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>旋转元素</title>
       <style type="text/css">
           ul{
               margin-top: 30px;
               list-style-type: none;
               line-height: 25px;
               font-family: arial;
               font-weight: bold;
           }
           li{
               width: 120px;
               float: left;
               margin: 2px;
               border: 1px solid #ccc;
               background-color: #e4e4e4;
               text-align: left;
           }
           li:hover{
               background-color: #999;
           }
           a{
               display: block;
               padding: 5px 10px;
               color: #333;
               text-decoration: none;
           }
           a:hover{
               background-color: #f90;
               color: #fff;
               -webkit-transform: rotate(20deg);
               -moz-transform: rotate(30deg);
               -ms-transform:rotate(30deg);
               transform: rotate(30deg);
           }
       </style>
   </head>
   <body>
       <ul>
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
           <li><a href="#">jQuery</a></li>
           <li><a href="#">Ajax</a></li>
       </ul>
   </body>
</html>

效果如下图所示：

缩放和翻转
scale()函数用于定义元素在二维空间的缩放和翻转，语法如下：
scale(x,y)
x,表示元素在水平方向上的缩放倍数
y,表示元素在垂直方向上的缩放倍数
x,y的值可以为整数，负数，小数，当取值的绝对值大于1时，表示放大，绝对值小于1时，表示缩小，当取值为负数时，元素会被翻转，如果y值省略，说明垂直方向上的缩放倍数和水平方向上的缩放倍数相同。
a:hover{
               background-color: #f90;
               color: #fff;
               -webkit-transform: scale(1.5);
               -moz-transform: scale(1.5);
               -ms-transform:scale(1.5);
               transform: scale(1.5);
}

效果如下图所示：

移动
translate(）函数用于定义元素在二维空间上的偏移，语法如下：
translate：x,y
x表示元素在水平方向上的偏移距离
y表示元素在垂直方向上的偏移距离
x,y的值为带有长度单位标识符的数值，可以为负值和带小数的值，若取值大于0，则表示向右或向下偏移，若取值小于0，则表示向左或者向上偏移，如果dy值省略，则说明垂直方向上的偏移距离默认为0.
a:hover{
               background-color: #f90;
               color: #fff;
               -webkit-transform: translate(10px,5px);
               -moz-transform: translate(10px,5px);
               -ms-transform:translate(10px,5px);
               transform: translate(10px,5px);
}

效果如下图所示：

倾斜
skew():用于定义元素在二维空间的倾斜变形，语法如下：
skew(anglex,angley)
anglex:表示元素在x轴上的倾斜角度
angley:表示元素在y轴上的倾斜角度
angelx,angely的值为带有角度单位标识符的数值，角度单位时deg,值为正时，标识顺时针旋转，值为负时，标识逆时针旋转，如果angely的值省略，则说明垂直方向上的倾斜角度默认为0deg
a:hover{
               background-color: #f90;
               color: #fff;
               -webkit-transform:skew(-30deg);
               -moz-transform: skew(-30deg);
               -ms-transform:skew(-30deg);
               transform: skew(-30deg);
}

效果如下图所示：

矩阵变形
matrix函数用于定义元素在二维空间的矩阵变形，语法如下：
matrix（m11,m12,m21,m22,x,y）
该函数中的6个值均为可计算的值，组成一个变形矩阵，与当前元素旧的参数组成的矩阵进行乘法运算，形成新的矩阵，元素的参数被改变。该变形矩阵的形式如下：
m11 m21 x
m12 m22 y
0 0 1
关于详细的矩阵变形原理，需要掌握矩阵的相关知识。
a:hover{
               background-color: #f90;
               color: #fff;
               -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);
               -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);
}

效果如下图所示：

同时使用多个变形函数
矩阵变形固然灵活，但是不直观，也不容易理解，transform属性允许同时使用多个变形函数，这使得元素变形可以更加灵活。
a:hover{
               background-color: #f90;
               color: #fff;
               -webkit-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
               -moz-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);
}

效果如下图所示：

定义变形原点transform-origin属性
变形属性默认的变形原点时元素对象的中心点，CSS3提供的transform-origin属性，可用于指定这个原点的位置，这个位置可以是元素对象的中心点以外的任意位置，进一步增加了变形的灵活性。
语法如下：
transform-origin:x-axis y-axis
取值说明：x-axis定义变形原点的横坐标位置，默认值为50%，取值包括left,centere,right,百分比，长度值。
y-axis:定义变形原点的纵坐标位置，默认值为50%，取值包括top,middle,bottom,百分比值，长度值。
其中，百分比是相对于元素对象的宽和高而言的，而该坐标的计算，是以元素的左上角为坐标为原点进行计算的。基于webkit内核的替代属性是-webkit-transform-origin,基于gecko内核的替代属性是-moz-transform-origin，基于presto内核的替代属性是-o-transform-origin属性，ie9浏览器的替代属性是-ms-transform-origin。
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>多种变形的元素</title>
       <style type="text/css">
           ul{
               margin-top: 30px;
               list-style-type: none;
               line-height: 25px;
               font-family: arial;
               font-weight: bold;
           }
           li{
               width: 120px;
               float: left;
               margin: 2px;
               border: 1px solid #ccc;
               background-color: #e4e4e4;
               text-align: left;
           }
           li:hover{
               background-color: #999;
           }
           a{
               display: block;
               padding: 5px 10px;
               color: #333;
               text-decoration: none;
               -webkit-transform-origin: 0 0;
               -moz-transform-origin: 0 0;
               -ms-transform-origin: 0 0;
               -moz-transform-origin: 0 0;
           }
           a:hover{
               background-color: #f90;
               color: #fff;
               -webkit-transform: rotate(30deg);
               -moz-transform: rotate(30deg);
               -ms-transform: rotate(30deg);
               transform: rotate(30deg);
           }
       </style>
   </head>
   <body>
       <ul>
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
           <li><a href="#">jQuery</a></li>
           <li><a href="#">Ajax</a></li>
       </ul>
   </body>
</html>

效果如下图所示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>图片画廊</title>
       <style type="text/css">
           body{
               background:url(img/bark.jpg);
           }
           #gallery{
               margin: 10px auto;
               padding: 40px;
               list-style: none;
               width: 530px;
           }
           #gallery li{
               float: left;
               width: 106px;
               height: 80px;
               overflow: visible;
           }
           #gallery li a{
               color: #333333;
               text-decoration: none;
               font-size: 4px;
               display: block;
               text-align: center;
               background-color: #FFFFFF;
               padding: 3px;
               opacity: 0.8;
               box-shadow: 0 0 5px 2px #333;
           }
           #gallery li a {
               -webkit-transition: all 500ms linear;
               -moz-transition: all 500ms linear;
               transition: all 500ms linear;
               -webkit-transform-origin: 0 0;
               -moz-transform-origin: 0 0;
               transform-origin: 0 0;
               -webkit-transform: rotate(-15deg);
               -moz-transform: rotate(-15deg);
               transform: rotate(-15deg);
           }
           #gallery li a img{
               width: 100px;
           }
           #gallery li:nth-child(3n) a{
               -webkit-transform: rotate(20deg);
               -moz-transform: rotate(20deg);
               transform: rotate(20deg);
           }
           #gallery li:nth-child(4n) a{
               -webkit-transform: rotate(15deg);
               -moz-transform: rotate(15deg);
               transform: rotate(15deg);
           }
           #gallery li:nth-child(7n) a{
               -webkit-transform: rotate(-10deg);
               -moz-transform: rotate(-10deg);
               transform: rotate(-10deg);
           }
           #gallery li:nth-child(0n) a{
               -webkit-transform: rotate(-20deg);
               -moz-transform: rotate(-20deg);
               transform: rotate(-20deg);
           }
           #gallery li a:hover{
               position: relative;
               z-index: 999;
               opacity: 1;
               -webkit-transform: rotate(0deg) scale(2);
               -moz-transform: rotate(0deg) scale(2);
               transform: rotate(0deg) scale(2);
           }
           #gallery li a:hover:after{
               content:attr(title);
           }
       </style>
   </head>
   <body>
       <ul id="gallery">
           <li><a href="#" title="图片1"><img src="img/1.jpg" alt="图片1"/></a></li>
           <li><a href="#" title="图片2"><img src="img/2.jpg" alt="图片2"/></a></li>
           <li><a href="#" title="图片3"><img src="img/3.jpg" alt="图片3"/></a></li>
           <li><a href="#" title="图片4"><img src="img/4.jpg" alt="图片4"/></a></li>
           <li><a href="#" title="图片5"><img src="img/5.jpg" alt="图片5"/></a></li>
           <li><a href="#" title="图片6"><img src="img/6.jpg" alt="图片6"/></a></li>
           <li><a href="#" title="图片7"><img src="img/7.jpg" alt="图片7"/></a></li>
           <li><a href="#" title="图片8"><img src="img/8.jpg" alt="图片8"/></a></li>
           <li><a href="#" title="图片9"><img src="img/9.jpg" alt="图片9"/></a></li>
           <li><a href="#" title="图片10"><img src="img/10.jpg" alt="图片10"/></a></li>
           <li><a href="#" title="图片11"><img src="img/11.jpg" alt="图片11"/></a></li>
           <li><a href="#" title="图片12"><img src="img/12.jpg" alt="图片12"/></a></li>
           <li><a href="#" title="图片13"><img src="img/13.jpg" alt="图片13"/></a></li>
           <li><a href="#" title="图片14"><img src="img/14.jpg" alt="图片14"/></a></li>
           <li><a href="#" title="图片15"><img src="img/15.jpg" alt="图片15"/></a></li>
       </ul>
   </body>
</html>

效果如下图所示：

CSS3的过渡效果
在CSS3中，transform属性所实现的元素变形，仅仅呈现的是变形结果，CSS3的过渡效果，可以让元素变形看起来更加平滑
CSS3新增的transition属性可以显示元素变换过程中的过渡效果，即实现了基本的动画，与元素变形属性一起使用，可以展现元素的变形过程，丰富动画的效果。
语法如下：
transition: transiton-property transition-duration transition-timing-function transition-delay
取值说明：
transition-property:定义用于过渡的属性
transition-duration:定义过渡过程需要的时间
transition-timing-function:定义过渡方式
transition-delay:定义开始过渡的延迟时间
transition属性定义一组过渡效果，需要上面4个方面的参数，transition属性可以同时定义两组或者两组以上的过渡效果，每组用逗号隔开。基于webkit内核的替代属性是-webkit-transition,基于gecko内核的替代属性是-moz-transition,基于presto内核的替代属性是-o-transiton
例子
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>过渡效果</title>
       <style type="text/css">
           div{
               margin: 100px auto;
               width: 200px;
               height: 100px;
               background-color: #00f;
               -webkit-transition: all 1000ms linear 500ms;
               -moz-transition: all 1000ms linear 500ms;
               transition: all 1000ms linear 500ms;
           }
           div:hover{
               background-color: #FF9900;
               -webkit-transform: rotate(240deg);
               -moz-transform: rotate(240deg);
               transform: rotate(240deg);
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

指定过渡的属性-transition-property属性，语法如下：
transition-property:none all property
取值说明：none表示没有任何CSS属性有过渡效果
all:默认值，表示所有的CSS属性都有过渡效果
property:指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果。
div{
               margin: 100px auto;
               width: 200px;
               height: 100px;
               background-color: #00f;
               -webkit-transition-property: -webkit-transform;
               -moz-transition-property: -moz-transform;
               transition-property: transform;
               -webkit-transition-duration:1s ;
               -moz-transition-duration: 1s;
               transition-duration: inherit;s
}

指定过渡的时间-transition-duration属性
transition-duration属性用于定义过渡过程中需要的时间，语法如下：
transition-duration:time
取值说明：time指定一个用逗号分隔开的多个时间值，时间的单位可以是s,或者ms,默认情况下为0.即看不到过渡效果，看到的直接是结果。
例子：
-webkit-transition-property: background-color,-webkit-transform;
-moz-transition-property: background-color,-moz-transform;
transition-property: background-color,transform;
-webkit-transition-duration: 4s 1s;
-moz-transition-duration: 4s 1s;
transition-duration: 4s 1s;

指定过渡延迟时间-transiton-delay
语法如下：
transition-delay:time
取值说明，time指定一个用逗号分隔开的多个时间值，单位可以是秒也可以是毫秒。默认情况下为0，即没有延迟。
div{
               margin: 100px auto;
               width: 200px;
               height: 100px;
               background-color: #00f;
               -webkit-transition-property: all;
               -moz-transition-property: all;
               transition-property: all;
               -webkit-transition-duration: 500ms;
               -moz-transition-duration: 500ms;
               transition-duration: 500ms;
               -webkit-transition-delay: 500ms;
               -moz-transition-delay: 500ms;
               transition-delay: 500ms;
           }

指定过渡方式-transition-timing-function属性
transition-timing-function子属性用于定义过渡曲线的速度曲线，即过渡方式，语法如下：
transition-timing-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.42,0,0.58,1);
ease-in-out:表示过渡的速度再开始和结束都很慢，相当于cubic-bezier(0.42,0,0.58,1);
cubic-beaier(n,n,n,n):字定义贝塞尔曲线，其中的四个参数，为从0到1的数字。
div{
               margin: 100px auto;
               width: 200px;
               height: 100px;
               background-color: #00f;
               -webkit-transition-property: all;
               -moz-transition-property: all;
               transition-property: all;
               -webkit-transition-duration: 1000ms;
               -moz-transition-duration: 1000ms;
               transition-duration: 1000ms;
               -webkit-transition-timing-function: ease-out;
               -moz-transition-function: ease-out;
               transition-function: ease-out;
}

案例：制作滑动菜单
菜单是网页的重要组成部分，设计一个良好的菜单是很有比要的，下面我们就用CSS3的过渡效果，来实现一个滑动效果的菜单
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>滑动的菜单</title>
       <style type="text/css">
           .box{
               margin: 0;
               padding: 0;
               font-size: 12px;
               list-style: none;
               width: 120px;
               float: left;
           }
           li{
               width: 80px;
               line-height: 20px;
               height: 20px;
               margin: 1px;
               background-color: #CCCCCC;
               text-align: left;
               border-radius: 0 10px 10px 0;
               border-left: 3px solid #333333;
               -webkit-transition: all 1s ease-out;
               -moz-transition: all 1s ease-out;
               transition: all 1s ease-out;
           }
           li a{
               display: block;
               text-decoration: none;
               font-size: 12px;
               padding-left: 5px;
               font-family: arial;
               font-weight: bold;
               color: #666;
           }
           li:hover{
               background-color: #FF9900;
               width: 100px;
               -webkit-transition: all 200ms linear;
               -moz-transition: all 200ms linear;
               transition: all 200ms linear;
           }
           li:hover a{
               color: #FFFFFF;
           }
       </style>
   </head>
   <body>
       <ul class="box">
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
           <li><a href="#">jQuery</a></li>
           <li><a href="#">Ajax</a></li>
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
           <li><a href="#">jQuery</a></li>
           <li><a href="#">Ajax</a></li>
       </ul>
       <ul class="box">
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
           <li><a href="#">jQuery</a></li>
           <li><a href="#">Ajax</a></li>
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
       </ul>
       <ul class="box">
           <li><a href="#">HTML5</a></li>
           <li><a href="#">CSS3</a></li>
           <li><a href="#">jQuery</a></li>
           <li><a href="#">Ajax</a></li>
       </ul>
   </body>
</html>

效果如下图所示：

CSS3动画设计
前面讲述的元素变形和动画效果，是制作动画的基础，但还不是真正的动画，本节将学习完整的动画设计，不但可以创建动画关键帧，还可以对关键帧动画设置播放时间，播放次数，播放方向，实现更加复杂，更加灵活的动画
@keyframes属性，语法规则如下：
@keyframes<animationname>{keyframes-selector}{<css-styles>}
animationname:动画的名称，必须定义一个动画名称，方便与动画属性animation绑定
keyframes-selector:动画持续时间的百分比，也可以是from和to,from对应的是0%，to对应的是100%。
css-styles:设置的一个或者多个合法的样式属性，必须定义一些样式，才能实现动画，动画，是通过一种样式变换到另一个种样式来创建的，再指定CSS样式变化时，可以从0%到100%逐步设计样式表的变化
例子：变换位置的小球
<!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: 10px;}
               75%{top: 50px;left: 10px;}
               100%{top: 100px;left: 60px;}
           }
           @-webkit-keyframes mymove{
               0% {top:0px}
               25%{top:200px;left: 10px;}
               75%{top: 50px;left: 10px;}
               100%{top: 100px;left: 60px;}
           }
       </style>
   </head>
   <body>
       <div>
           <img src="img/22.jpg" width="30" height="30"/>
       </div>
   </body>
</html>

效果如下图所示：

动画的实现animation属性
CSS3提供的animation属性，是专门用于动画设计的，它可以把一个或者多个关键帧动画绑定到元素上，以实现更加复杂的功能。
animation:name duration timing-function delay iteration-count direction
取值说明：
name:定义动画的名称，绑定指定的关键帧动画
duration:定义动画播放的周期时间
timing-function:定义动画播放的方式，即速度曲线
delay:定义动画的延迟时间
iteration-count:定义动画播放的次数
direction:定义动画播放的顺序方向
指定动画的名称-animation-name属性
animation-name子属性，用于指定动画的名称，该名称是一个动画关键帧的名称，是由@keyframes规则定义的。语法如下：
animation:keyframes none
none:默认值，表示没有动画
keyframes:指定动画名称，即指定名称对应的动画关键帧。
如果动画关键帧的名称为none,则不会显示动画，可以同时指定多个动画名称，多个名称间用逗号隔开，如果需要，可以使用none，取消任何动画
指定动画播放时间，animation-duration属性
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)
指定动画延迟时间animation-delay属性
animation-delay子属性，是用来定义动画播放的延迟时间，它可以定义一个动画延迟一段时间再播放，语法如下：
animation-delay:time
time用于指定动画播放的延迟时间，单位为秒或者毫秒，默认值为0，表示没有时间延迟。。直接播放动画
animation-iteration-count:用来指定动画循环播放的次数，语法如下；
animation-iteration-count:infinite n
infinite:表示无限次的播放下去。
n:该值为数字，表示循环播放的次数，属性值默认为1，表示动画只播放一次。
指定动画的播放方向-animation-direction属性
用来指定动画的播放方向，语法如下：
animation-direction:normal alternate;
normal:为默认值，表示按照关键帧设定的动画方向播放，
alternate:表示动画的播放方向与上一播放周期相反，第一播放周期还是正常的播放方向。
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>变化的页面元素</title>
       <style type="text/css">
           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-count: infinite;
               -webkit-animation-iteration-count: infinite;
               -moz-animation-timing-function: linear;
               -webkit-animation-timing-function: linear;
               -moz-animation-duration: 4s, 3s;
               -webkit-animation-duration: 4s, 3s;
           }
           @-moz-keyframes mymove{
               0% {top: 25px;left: 100px;background-color: #00f;}
               25% {top: 50px;left: 100px;background-color: #00f;}
               75% {top: 75px;left: 100px;background-color: #00f;}
               100% {top: 100px;left: 200px;background-color: #FF9900f;}
           }
           @-webkit-keyframes mymove{
               0% {top: 25px;left: 100px;background-color: #00f;}
               25% {top: 50px;left: 100px;background-color: #00f;}
               75% {top: 75px;left: 100px;background-color: #00f;}
               100% {top: 100px;left: 200px;background-color: #FF9900f;}
           }
           @-moz-keyframes myrotate{
               100% {-moz-transform: rotate(360deg);}
           }
           @-webkit-keyframes myrotate{
               100% {-webkit-transform: rotate(360deg);}
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

效果如下图所示：

CSS3渐变设计
渐变，是网页设计中使用频率较高的一种效果，它可以让元素看起来更有质感，传统的渐变实现方式是非常依赖图片的，而CSS3能方便地实现元素的渐变，避免了过多使用渐变图片所带来的麻烦，而且再放大网页的情况下一样过渡自然
渐变分为两种，线性渐变和径向渐变。
CSS线性渐变
基于webkit内核的实现
基于webkit内核的语法如下：
-webkit-gradient linear point point from color to color color-stop percent color
linear:表示线性渐变类型
point：定义渐变的起始点和结束点，第一个表示起始点，蝶儿个表示结束点，该坐标的取值，支持数值，百分比，和关键字，如(0.5,0.5),(50%,50%),(left,top),关键字包括定义横坐标的left和right,定义纵坐标的top,bottom.
color:表示任意CSS颜色值
percent:表示百分比值，用于确定起始点和结束点之间的某个位置
from:定义起始点的颜色
to:定义结束点的颜色
color-stop:可选函数，可再渐变中，多次添加过渡颜色，可以实现多种颜色的渐变。
2基于gecko内核的实现，语法如下：
-moz-linear-gradient: point angel color color percent color
point:定义渐变的起始点，该坐标的取值支持数值百分比，，关键字。
angel:定义线性渐变的角度，单位可以是deg,grad,rad
color:表示渐变使用的CSS颜色值
percent:表示百分比，用于确定起始点和结束点之间的某个位置
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>线性渐变的背景</title>
       <style type="text/css">
           div{
               width: 400px;
               height: 200px;
               background-color: #FF9900;
               background: -webkit-gradient(linear,left top, left bottom,from(#f90),to(#0f0));
               background:-moz-linear-gradient(left,#f90,#0f0);
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

CSS径向渐变
基于webkit内核的实现语法如下：
-webkit-gradient:radial point radius from color to color color-stop percent,color
取值说明：
radial:表示径向渐变类型
point:定义渐变的起始圆的圆心坐标和结束圆的圆心坐标，该坐标点的取值，支持数值，百分比，关键字，如(0.5,0.5),(50%,50%),(left,top)
radius:表示圆的半径，定义起始圆的半径和结束圆的半径，
color:表示任意CSS颜色值
percent:表示百分比值，用于定义起始点和结束点之间的某个位置
from 定义起始圆的颜色
to:定义结束圆的颜色
color-stop:可选函数，可再渐变中，多此添加过渡颜色，可以实现多种颜色的渐变
基于gecko内核的实现
-moz-radial-gradient point angle shape radius color color percent color
point:定义渐变的起始点，该坐标的取值支持数值，百分比，关键字，
angle：定义径向渐变的角度，单位可以是deg,grad,rad
shape:定义径向渐变的形状，包括circle圆,ellipse椭圆,
radius:定义圆的半径或者椭圆的轴长度
color:表示渐变使用的CSS颜色值
percent:表示百分比值，用于确定起始圆和结束圆之间的某个位置
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>径向渐变的圆</title>
       <style type="text/css">
           div{
               width: 400px;
               height: 200px;
               background-color: #FF9900;
               background:-webkit-gradient(radial,200 100,10,200 100,100,
               from(#FF9900),to(#00FF00),color-stop(50%,blue));
               background:-moz-radial-gradient(200px 100px,circle,#f90 10px,blue,#0f0 100px);
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>