就不作其他解釋了，直接上代碼了，可以先試試效果，然后修改下顏色代碼就行了。 大多數(shù)特效都是由CSS3完成的，唯一缺點(diǎn)就是兼容性，想要追求效果，就要失去兼容性。CSS3的Transition屬性，這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)效果改變CSS的屬性值。
transition:顏色 變換延續(xù)的時(shí)間 變換速率
transition:background-color 0.3s linear 變換速率：
1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。
//Mozilla內(nèi)核
-moz-transition ：
//Webkit內(nèi)核
-webkit-transition ：
//Opera
-o-transition ：
//W3C 標(biāo)準(zhǔn)
transition ：
案例展示：紅色部分就是代碼，復(fù)制過(guò)去試試效果。
.nav li {display:block;float:left;-webkit-transition:background-color 0.3s linear;-moz-transition:background-color 0.3s linear;-o-transition:background-color 0.3s linear;transition:background-color 0.3s linear;}
.nav li:hover {background:#454648}
.nav li a {padding:0 25px;margin-left:3px;display:block;float:left;font-size:14px;color:#8C8C8C;-webkit-transition:color 0.3s linear;-moz-transition:color 0.3s linear;-o-transition:color 0.3s linear;transition:color 0.3s linear;} .nav li a:hover {font-size:14px;color:#fff;}
