这篇文章主要介绍了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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
