Effect of image masks-webkit-mask,

Effect of image masks-webkit-mask,

PS shoes will be used to know the concept of "Mask". It can achieve a certain mask effect on the image. Of course, we will not introduce the masks in ps here, instead, we will introduce how to use the new property-webkit-mask of CSS3 to implement the Image mask effect on webpages.

You may not be familiar with the-webkit-mask attribute. Many may have seen it for the first time. Yes, this attribute is also a CSS attribute not supported by many browsers, currently, only-Webkit-Google and safari browser with a prefix, but we believe that this attribute will be supported by other mainstream browsers in the near future. Let's take a look at it as soon as possible.

First, we will introduce its property value. There are two ways to write it (Image Mask and gradient mask ):

I. Image masks

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

Its Attribute values are basically the same as those in the background syntax. The relevant attributes include webkit-mask-clip, webkit-mask-position, and webkit-mask-repeat.

The implementation is as follows:

Here, the transparency (alpha) value of the black part in the Second mask.png is 1, and the image area below it is displayed completely, while the transparency of the remaining part is 0 (alpha value ), it will completely overwrite the image area below it.

 

Ii. Gradient mask

.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)));}

The attribute value is the old CSS gradient Syntax:-webkit-gradient (<type>, <point> [, <radius>]?, <Point> [, <radius>]? [, <Stop>] *)

New Syntax:-webkit-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>] *) after my test, it is found that it is not supported currently.

As follows:

 

3. Dynamic Effects of logo masks

With-webkit-mask, we can also make cool logo mask animation effects, and use js controls to let the masks move. As follows:

The implementation code is as follows:

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

You can use setInterval to dynamically change the gradient position of the mask layer.

We can also change the starting point and ending point of the gradient to achieve different effects:

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

Okay, Isn't it cool?

However, other browsers except webkit are not supported. If you require a high degree of browser compatibility, use it with caution. However, in the spirit of progressive enhancement, it is always better, right, it doesn't matter if you don't see it.

Over ~ Welcome to comments.

 

Original article. For more information, see [http://www.cnblogs.com/luozhihao]
Address: http://www.cnblogs.com/luozhihao/p/4785076.html