webkit内核浏览器实现蒙版遮罩和动画效果

熟悉photoshop的同学都知道,它里面有蒙版遮罩层的效果,在webkit内核的浏览器中同样可以实现。在本文中我将使用以下几个标签,来实现图层蒙版和动画效果。

-webkit-mask

-webkit-mask属性非常强大,它让为一个元素添加蒙板成为可能,这和ps里面的蒙板功能是一样的。如下例所示:

背景图片:

蒙版层:

css样式:

.img{
	-webkit-mask:url("002.png");
}

html代码:

<img src="0011.jpg" />

最终效果如下:

蒙版除了用半透明的png图片,还可以用它自身的样式来实现,如下例所示,当它的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。

css样式:

.img{
	-webkit-mask:-webkit-gradient(linear,0% 0%, 0% 100%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

最终效果:

渐变的写法具体参考css3实现背景颜色线性渐变

-webkit-mask-position:移动的蒙版

-webkit-mask还有另外一个重要属性,它可以设置蒙版的位置,下面我们通过一个例子来讲述一下:

css样式:

.img{
	-webkit-mask:url("002.png");
	-webkit-mask-position:0 0;
}
.img:hover{
	-webkit-mask-position:-83px -83px;
}

html样式不变,最终效果如下(左边为正常状态,右边为鼠标移动上去的状态):

这里,我们还可以用-webkit-animation来制作自动移动的蒙版,复制下面的代码,自行进行测试:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
@-webkit-keyframes wipe {
 0% {
 -webkit-mask-position:0 0;
}
 100% {
 -webkit-mask-position:-170px 0;
}
}
.img {
	-webkit-mask:url(http://www.rainleaves.com/wp-content/uploads/2011/12/002.png);
	-webkit-animation:wipe 6s infinite;
	-webkit-animation-delay:0;
	-webkit-animation-direction:alternate;
}
.img:hover {
}
</style>
</head>
<body>
<img class="img" src="http://www.rainleaves.com/wp-content/uploads/2011/12/0011.jpg"/>
</body>
</html>

现在大概来说一下里面用到的属性:

-webkit-animation:定义一段动画属性,比如上面用到的名字(wipe)、持续的时间(6s)、循环次数(infinite无限循环)、延续时间(delay)、方向(direction)。

-webkit-keyframes:则对每一个动画定义时间轴,可以设置某个时间动画作用的元素是什么状态。里面分别设置了0%时是什么位置,100%时是什么位置。

写完之后又发现这个题目比较偏,不知道对大家有没有帮助,目前除了webkit内核的浏览器,其它还不支持这个属性,只能通过js来弥补,希望将来有一天,不再存在这种情况。

马上分享给你的朋友吧~

webkit内核浏览器实现蒙版遮罩和动画效果》上有 13 条评论

  1. 这篇文章有点老了,因为现在不仅仅只有webkit内核的浏览器支持,还有其它浏览器支持,过几天再重新更新一下这篇文章

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>