就不作其他解释了,直接上代码了,可以先试试效果,然后修改下颜色代码就行了。大多数特效都是由CSS3完成的,唯一缺点就是兼容性,想要追求效果,就要失去兼容性。CSS3的Transition属性,这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition:颜色 变换延续的时间 变换速率
transition:background-color 0.3s linear变换速率:
案例展示:红色部分就是代码,复制过去试试效果。.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;}
新闻热点
疑难解答