CSS3怎么实现按钮淡入淡出效果

发布时间：2022-03-09 15:54:26 作者：iii
来源：亿速云阅读：1772

这篇文章主要介绍了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">

<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">

</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怎么实现按钮淡入淡出效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

CSS3怎么实现按钮淡入淡出效果

相关阅读