1. 源碼屋首頁
  2. 站長學院
  3. 搭建教程

CSS hover背景/文字漸變效果

就不作其他解釋了,直接上代碼了,可以先試試效果,然后修改下顏色代碼就行了。大多數特效都是由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;}

本文由(源碼屋@)整理自網絡,如轉載請注明出處:http://www.jxorxu.icu/37758.html

本站發布的內容若侵犯到您的權益,請郵件聯系[email protected] ?刪除,我們將及時處理!

=========================================

本站大部分下載資源收集于網絡,不保證其完整性以及安全性,請下載后自行測試。

本站資源僅供學習和交流使用,版權歸資源原作者所有,請在下載后24小時之內自覺刪除。

若作商業用途,請購買正版,由于未及時購買和付費發生的侵權行為,與本站無關。

發表評論

登錄后才能評論

聯系我們

在線咨詢:點擊這里給我發消息

郵件:[email protected]

QR code
欢乐捕鱼人能赢话费么 河南22选5玩法 喜乐彩中奖规则 广西11先5开奖走势图 黑龙快乐十分综合走势图 精准两波中特全年料 辽宁35选7一等奖 000635股票分析 山西快乐10分走势图下载 体彩四川金七乐开奖结果 福建36选7技巧 近日推荐股票 甘肃快三今天开奖情况 2019篮球世界杯开战 极速时时彩官方几点停盘 陕西11选5走势图44期 新手怎么学习理财