8535.com-新浦京娱乐场官网|欢迎您

浅谈图片蒙版效果-webkit-mask,

来源:http://www.dnamique.com 作者:计算机网络 人气:143 发布时间:2020-01-04
摘要:新浦京娱乐场官网,浅谈图片蒙版效果-webkit-mask, 会用PS的童鞋一定精通“蒙版”的定义,它能够在图纸上实现自然的遮罩效果,当然这里大家不介绍ps里的蒙版,而是介绍利用CSS3的新

新浦京娱乐场官网,浅谈图片蒙版效果-webkit-mask,

会用PS的童鞋一定精通“蒙版”的定义,它能够在图纸上实现自然的遮罩效果,当然这里大家不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来得以达成网页中的图片遮罩效果。

世家对-webkit-mask那生龙活虎品质大概不太熟习,或者有这厮都以首先次探访,对的,那风姿罗曼蒂克属性也是尚未被不菲浏览器所支撑的CSS属性,这段时间扶助那一天性的唯有-webkit-前缀的Google及safari浏览器,可是相信在不久的前途那大器晚成属性将被别的主流浏览器所扶植,下边我们来生龙活虎睹为快。

第一介绍一下它的属性值,能够有两种写法(图片蒙版、渐变蒙版):

一、图片蒙版

.demo1 {
    background : url("images/logo.png") no-repeat;
    -webkit-mask : url("images/mask.png");
}

它的属性值与background的语法基本等同,相关的习性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。

上面正是其贯彻的功能图:

新浦京娱乐场官网 1

此处须求注意的是第二张mask.png中雪白部分的发光度(阿尔法)值为1,将完全显示其江湖的图纸区域,而别的部分的反射率为0(阿尔法值),将完全覆盖其江湖的图片区域。

 

二、渐变蒙版

.demo1 {
    background : url("images/logo.png") no-repeat;
    -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

其属性值为CSS渐变老式语法:-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 

而新颖语法:-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* 卡塔尔(قطر‎  经过自家的测量检验发现暂不扶助

意义图如下:

新浦京娱乐场官网 2

 

三、logo遮罩动态效果

行使-webkit-mask大家还足以创设绚烂的logo遮罩动漫效果,用js调整让蒙版动起来。效果图如下:

新浦京娱乐场官网 3

贯彻代码如下:

$(function(){
     $(".mask").mouseover(function(){
          var b=0,c=$(this),
          d=setInterval(function(){
               if(b>parseInt(c.width()+50)){clearInterval(d);}
               c.css({"-webkit-mask":"-webkit-gradient(radial, 88 53,"+b+", 88 53, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))"});
               b++;
           },0);
     });
});

因而setInterval来对遮罩层渐变地点举办动态变化。

我们还足以转移渐变的起源和终端地方来促成不相同的机能:

-webkit-gradient(radial, 0 0,"+b+", 0 0, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))

新浦京娱乐场官网 4

好了,是或不是很炫目?

可是除了webkit的浏览器外别的浏览器不协助啊,借使对浏览器包容性供给异常高的话慎用,但是针对渐进加强的发掘,有总比没有好对吧,看不到也无所谓对吗。

over~招待探讨。

 

原创小说,转发请表明来源一个萝卜一个坑 -腾讯网[]
正文地址:

会用PS的童鞋一定领会蒙版的定义,它能够在图纸上实现自然的遮罩效果,当然这里大家不介绍ps里的蒙版,...

本文由8535.com-新浦京娱乐场官网|欢迎您发布于计算机网络,转载请注明出处:浅谈图片蒙版效果-webkit-mask,

关键词:

最火资讯