溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS3怎么實現按鈕淡入淡出效果的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS3怎么實現按鈕淡入淡出效果文章都會有所收獲，下面我們一起來看看吧。
CSS2.1時代可以使用4種方法表示顏色，即直接使用顏色名（如red、blue）、RGB值（如rgb(255,0,0)）、RGB百分比（如rgb(100%,0%,0%)）或者十六進制數（如#ff0000）；而表示透明度需要使用opacity屬性或透明圖片。隨著css3的誕生，我們可以利用HSLA或者RGBA直接定義顏色和透明效果。
透明度：opacity
在CSS3出現之前，只能通過某些瀏覽器的特殊屬性實現元素的透明度效果。現在，通過opacity屬性，我們可以方便地設置元素的透明度。
為元素設置透明度后，它下方的元素就能夠部分顯示出來。
opacity應用的經典案例是按鈕淡入淡出的實現。它的原理是將按鈕普通狀態效果圖片和按鈕懸停（hover）狀態效果圖片疊加放在一起，懸停效果圖片放在上層，但是透明度設置為0。當鼠標懸停到按鈕上時，將上層懸停效果圖片透明度由0漸變到1；當鼠標移出時，再將上層懸停效果圖片透明度由1漸變到0，
采用opacity實現按鈕淡入淡出效果的完整代碼如下所示：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8">
<title>HTML5</title>
<style>
#gradient{
height:27px;
width:27px;
background:url(button_bg.png),url(search.png)centercenterno-repeat;
}
#gradientspan{
height:100%;
width:100%;
display:block;
background:url(button_bg_hover.png),url(search.png)centercenter
no-repeat;
opacity:0;
}
#gradient:hoverspan{
opacity:1;
transition:allease-in0.2s;/*在懸停時使用動畫效果改變透明度*/
}
</style>
</head>
<body>
<divid="gradient">
<span></span>
</div>
</body>
</html>
當鼠標懸停在按鈕上時，按鈕將會按照從左向右的效果變化，并顯示為最終的懸停效果：
在上面的代碼中，我們用到了CSS3的一個重要屬性transition，請繼續關注其它文章，我們將在后面對它進行講解。
HSL
HSL是工業界一種顏色標準，H、S、L分別表示色調、飽和度和亮度，它幾乎包括了人類視覺所能感知的所有顏色，是目前運用最廣的顏色系統之一。CSS3添加了對此標準的支持，在RGB之外提供了另外一種顏色的表現方式。
使用HSL，可以基于色調、飽和度和亮度進行調節。
例如下圖中的三種顏色具有同樣的色調和飽和度，僅僅是亮度方面有所差別。使用HSL，調節顏色的色調、飽和度和亮度就相當容易了，不需要再去計算RGB的值。
HSLA和RGBA
顧名思義，HSLA就是HSL加上“Alpha通道”（即透明度），我們可以用HSLA為HSL顏色設置透明度。在任何使用顏色的地方都能使用HSLA，如背景、邊框、盒陰影里。當HSLA中A的值等于1時，效果和HSL完全一樣。
RGBA同HSLA一樣，代表RGB和透明度的結合。它和CSS2.1的RGB值使用方法相同，前三個值可以是數值，也可以是百分比，第四個值是透明度，透明度值為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));
/*背景顏色漸變*/
關于“CSS3怎么實現按鈕淡入淡出效果”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS3怎么實現按鈕淡入淡出效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
