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

这篇文章主要介绍了CSS3怎么实现按钮淡入淡出效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS3怎么实现按钮淡入淡出效果文章都会有所收获,下面我们一起来看看吧。

发展壮大离不开广大客户长期以来的信赖与支持,我们将始终秉承“诚信为本、服务至上”的服务理念,坚持“二合一”的优良服务模式,真诚服务每家企业,认真做好每个细节,不断完善自我,成就企业,实现共赢。行业涉及茶艺设计等,在成都网站建设全网营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

    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实现按钮淡入淡出效果的完整代码如下所示:

   

   

   

   

    HTML5

   

   

   

   

   

   

   

   

    当鼠标悬停在按钮上时,按钮将会按照从左向右的效果变化,并显示为最终的悬停效果:

    在上面的代码中,我们用到了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怎么实现按钮淡入淡出效果
网页链接:http://cdiso.cn/article/gigpph.html

其他资讯