這篇文章主要介紹了CSS3怎么實現(xiàn)按鈕淡入淡出效果的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS3怎么實現(xiàn)按鈕淡入淡出效果文章都會有所收獲，下面我們一起來看看吧。
發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及茶藝設(shè)計等，在成都網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、WAP手機網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。
CSS2.1時代可以使用4種方法表示顏色，即直接使用顏色名（如red、blue）、RGB值（如rgb(255,0,0)）、RGB百分比（如rgb(100%,0%,0%)）或者十六進制數(shù)（如#ff0000）；而表示透明度需要使用opacity屬性或透明圖片。隨著css3的誕生，我們可以利用HSLA或者RGBA直接定義顏色和透明效果。
透明度：opacity
在CSS3出現(xiàn)之前，只能通過某些瀏覽器的特殊屬性實現(xiàn)元素的透明度效果?，F(xiàn)在，通過opacity屬性，我們可以方便地設(shè)置元素的透明度。
為元素設(shè)置透明度后，它下方的元素就能夠部分顯示出來。
opacity應(yīng)用的經(jīng)典案例是按鈕淡入淡出的實現(xiàn)。它的原理是將按鈕普通狀態(tài)效果圖片和按鈕懸停（hover）狀態(tài)效果圖片疊加放在一起，懸停效果圖片放在上層，但是透明度設(shè)置為0。當(dāng)鼠標(biāo)懸停到按鈕上時，將上層懸停效果圖片透明度由0漸變到1；當(dāng)鼠標(biāo)移出時，再將上層懸停效果圖片透明度由1漸變到0，
采用opacity實現(xiàn)按鈕淡入淡出效果的完整代碼如下所示：
當(dāng)鼠標(biāo)懸停在按鈕上時，按鈕將會按照從左向右的效果變化，并顯示為最終的懸停效果：
在上面的代碼中，我們用到了CSS3的一個重要屬性transition，請繼續(xù)關(guān)注其它文章，我們將在后面對它進行講解。
HSL
HSL是工業(yè)界一種顏色標(biāo)準(zhǔn)，H、S、L分別表示色調(diào)、飽和度和亮度，它幾乎包括了人類視覺所能感知的所有顏色，是目前運用最廣的顏色系統(tǒng)之一。CSS3添加了對此標(biāo)準(zhǔn)的支持，在RGB之外提供了另外一種顏色的表現(xiàn)方式。
使用HSL，可以基于色調(diào)、飽和度和亮度進行調(diào)節(jié)。
例如下圖中的三種顏色具有同樣的色調(diào)和飽和度，僅僅是亮度方面有所差別。使用HSL，調(diào)節(jié)顏色的色調(diào)、飽和度和亮度就相當(dāng)容易了，不需要再去計算RGB的值。
HSLA和RGBA
顧名思義，HSLA就是HSL加上“Alpha通道”（即透明度），我們可以用HSLA為HSL顏色設(shè)置透明度。在任何使用顏色的地方都能使用HSLA，如背景、邊框、盒陰影里。當(dāng)HSLA中A的值等于1時，效果和HSL完全一樣。
RGBA同HSLA一樣，代表RGB和透明度的結(jié)合。它和CSS2.1的RGB值使用方法相同，前三個值可以是數(shù)值，也可以是百分比，第四個值是透明度，透明度值為1的元素是完全不透明的，為0的元素是完全透明的。
RGBA的使用方法如下面的代碼所示：
.box1{
background:rgba(0,0,255,1);/*藍色，透明度為100%，完全不透明*/
}
.box2{
background:rgba(100%,50%,0%,0.5);/*橙綠色，透明度為50%*/
}
在background屬性中使用RGBA的示例CSS代碼為如下：
background:linear-gradient(top,rgba(255,255,255,0.75),rgba(222,231,233,0.7));
/*背景顏色漸變*/
關(guān)于“CSS3怎么實現(xiàn)按鈕淡入淡出效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS3怎么實現(xiàn)按鈕淡入淡出效果”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
