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实现按钮淡入淡出效果的完整代码如下所示:
#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;/*在悬停时使用动画效果改变透明度*/
}
当鼠标悬停在按钮上时,按钮将会按照从左向右的效果变化,并显示为最终的悬停效果:
在上面的代码中,我们用到了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