CSS3图片蒙版效果-webkit-mask

大家对-webkit-mask这一属性可能不太熟悉，或许有很多人都是第一次见到，没错，这一属性也是还未被众多浏览器所支持的CSS属性，目前支持这一属性的仅有 -webkit-前缀的谷歌 及 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等。

下面就是其实现的效果图：

这里需要注意的是第二张mask.png中黑色部分的透明度（alpha）值为1，将完全显示其下方的图片区域，而其余部分的透明度为0（alpha值），将完全覆盖其下方的图片区域。

二、渐变蒙版

.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(, [, ]?, [, ]? [, ]*)

而新式语法：-webkit-linear-gradient( [ || ,]? , [, ]* ) 经过我的测试发现暂不支持

效果图如下：

三、logo遮罩动态效果

利用-webkit-mask我们还可以制作炫酷的logo遮罩动画效果，用js控制让蒙版动起来。效果图如下：

$(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))
)