就不作其他解釋了,直接上代碼了,可以先試試效果,然后修改下顏色代碼就行了。 大多數(shù)特效都是由CSS3完成的,唯一缺點就是兼容性,想要追求效果,就要失去兼容性。CSS3的Transition屬性,這種效果可以在鼠標單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā),并圓滑地以動畫效果改變CSS的屬性值。
transition:顏色 變換延續(xù)的時間 變換速率
transition:background-color 0.3s linear 變換速率:1、ease:(逐漸變慢)默認值,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:(該值允許你去自定義一個時間曲線), 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區(qū)域內(nèi),否則無效。
案例展示:紅色部分就是代碼,復(fù)制過去試試效果。
.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;}
版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!
轉(zhuǎn)載請注明: CSS hover背景/文字漸變效果