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(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

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

效果图如下：

三、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))
)

CSS3图片蒙版效果-webkit-mask相关推荐

boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
CSS3图片跳动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS ...
浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
html图片蒙版效果代码,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
html图片转换特效,css3图片切换效果
本教程将带给大家一些很酷的图片切换效果的制作方法.为了使大家看到不同的效果,我们准备了三种不同的例子:图片切换.全屏幻灯片和一些产品展示.这些效果不仅仅可以运用在幻灯片中.但在我们的例子中,都是以幻灯 ...
html图片叠,很棒的CSS3图片堆叠效果
使用 :before :after伪元素,以便做一些有趣的效果与CSS.在这里,我要告诉你如何创建一个简单的'堆叠'看一些图片. 第一步创建HTML代码第二步使用CSS .stack { po ...
用css3实现ps蒙版效果+动画
说实话,css3越来越强大,使用css也可以做越来越多意想不到的效果. 今天,见到有人用css3实现了ps的蒙版效果,如下所示: 实现原理这个动画,其实也并不复杂.它使用background-cli ...
超厉害的CSS3图片破碎爆炸效果！
Java代码 var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; ...

CSS3图片蒙版效果-webkit-mask

CSS3图片蒙版效果-webkit-mask相关推荐

最新文章

热门文章