通过CSS的transition实现hover渐变

CSS3的Transition属性，这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition:颜色变换延续的时间变换速率

transition:background-color 0.3s linear

变换速率：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

//Mozilla内核

-moz-transition ：

//Webkit内核

-webkit-transition ：

//Opera

-o-transition ：

//W3C 标准

transition ：

 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 div{
       width:100px;
       height:100px;
       background:blue;
       transition:width 2s;
       -moz-transition:width 2s; /* Firefox 4 */
       -webkit-transition:width 2s; /* Safari and Chrome */
       -o-transition:width 2s; /* Opera */
 }
 
 div:hover
 {
 width:300px;
 }
 </style>
 </head>
 <body>
 
 <div></div>
 
 <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
 
 <p><b>注释：</b>本例在低版本 Internet Explorer 中无效。>  >      </p>
 
 </body>
 </html>

通过CSS的transition实现hover渐变

推荐阅读更多精彩内容