就不作其他解释了，直接上代码了，可以先试试效果，然后修改下颜色代码就行了。
大多数特效都是由CSS3完成的，唯一缺点就是兼容性，想要追求效果，就要失去兼容性。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 ：
案例展示：红色部分就是代码，复制过去试试效果。
.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;}
附件详情
-
说明:
普通用户每次点击下载扣除1金币
-
附件名：
-
附件分类：
暂无
-
账户经验：
-
账户金币：
-
账户灵石：
-
上传信息：
兔耳|2026-05-03
-
下载地址：
CSWL官方博客
