带蒙版的Webkit图像效果

最新推荐文章于 2024-01-23 16:37:23 发布

cuken7684698822

最新推荐文章于 2024-01-23 16:37:23 发布

阅读量117

点赞数

文章标签： html js css3 jquery html5 ViewUI

原文链接：https://www.script-tutorials.com/webkit-image-effects-with-masks/

版权

Webkit image effects with masks Today’s article may seem short, but it describes some interesting features of webkit browsers, in particular – the animation of images using masks. I want to warn – these examples will only work in webkit browsers (Chrome and Safari). The idea to study the masks came to me when I saw the Chrome browser logo on Google website. I liked this effect and I wondered to understand how it works. Well, what is a mask? Basically, this is an image (or gradient), where a transparent part will make your element invisible, non-transparent will make your element visible. These masks are similar as in Photoshop.

带有蒙版的Webkit图像效果今天的文章可能看似简短，但它描述了Webkit浏览器的一些有趣功能，尤其是–使用蒙版对图像进行动画处理。我要警告–这些示例仅适用于Webkit浏览器(Chrome和Safari)。当我在Google网站上看到Chrome浏览器徽标时，想到了研究口罩的想法。我喜欢这种效果，并且想知道它是如何工作的。好吧，什么是口罩？基本上，这是图像(或渐变)，其中透明的部分将使您的元素不可见，不透明的部分将使您的元素可见。这些蒙版与Photoshop中的相似。

To make our examples I used the -webkit-mask property (with different variations). This property is used to set individual mask property values for various elements. Now, please check our little demo (and download our sources), and I will explain how it works.

为了创建示例，我使用了-webkit-mask属性(具有不同的变体)。此属性用于为各种元素设置单独的蒙版属性值。现在，请查看我们的小演示(并下载我们的资源)，我将解释它的工作原理。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

步骤1. HTML (Step 1. HTML)

Our HTML markup is really easy for today:

今天，我们HTML标记非常简单：

index.html (index.html)


<div id="examples">
    <img class="type1" src="images/logo.png" />
    <img class="type2" src="images/logo2.png" />
    <img class="type3" src="images/logo3.png" />
    <img class="type4" src="images/logo4.png" />
</div>


<div id="examples">
    <img class="type1" src="images/logo.png" />
    <img class="type2" src="images/logo2.png" />
    <img class="type3" src="images/logo3.png" />
    <img class="type4" src="images/logo4.png" />
</div>

There are only four images. Every image has own unique effect.

只有四个图像。每个图像都有自己独特的效果。

第2步：JS (Step 2. JS)

To make first two effects I had to use custom radial gradients. The main idea is to display expanding radial gradient (in a loop) until it reaches the end of image. It is nearly impossible to change the radial gradient params of -webkit-mask params with onle CSS3 (even using keyframes). This is why I had to use javascript here.

为了产生前两个效果，我必须使用自定义径向渐变。主要思想是显示扩展的径向渐变(循环显示)，直到到达图像末端为止。仅使用CSS3更改-webkit-mask参数的径向渐变参数几乎是不可能的(即使使用关键帧也是如此)。这就是为什么我不得不在这里使用javascript。

js / main.js (js/main.js)


$(document).ready(function(){
    $('#examples img').hover(function () {
        var $imgObj = $(this);
        // class name
        var sClass = $(this).attr('class');
        // radius
        var iRad = 0;
        // interval
        var iInt;
        if (iInt) window.clearInterval(iInt);
        // loop until end
        iInt = window.setInterval(function() {
            var iWidth = $imgObj.width();
            var iHalfWidth = iWidth / 2;
            var iHalfHeight = $imgObj.height() / 2;
            if (sClass == 'type1') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfWidth+' '+iHalfHeight+', '+ iRad +', '+iHalfWidth+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            } else if (sClass == 'type2') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfHeight+' '+iHalfHeight+', '+ iRad +', '+iHalfHeight+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            }
            // when radius is more than our width - stop loop
            if (iRad > iWidth) {
                window.clearInterval(iInt);
            }
            iRad+=2;
        }, 10);
    });
});


$(document).ready(function(){
    $('#examples img').hover(function () {
        var $imgObj = $(this);
        // class name
        var sClass = $(this).attr('class');
        // radius
        var iRad = 0;
        // interval
        var iInt;
        if (iInt) window.clearInterval(iInt);
        // loop until end
        iInt = window.setInterval(function() {
            var iWidth = $imgObj.width();
            var iHalfWidth = iWidth / 2;
            var iHalfHeight = $imgObj.height() / 2;
            if (sClass == 'type1') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfWidth+' '+iHalfHeight+', '+ iRad +', '+iHalfWidth+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            } else if (sClass == 'type2') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfHeight+' '+iHalfHeight+', '+ iRad +', '+iHalfHeight+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            }
            // when radius is more than our width - stop loop
            if (iRad > iWidth) {
                window.clearInterval(iInt);
            }
            iRad+=2;
        }, 10);
    });
});

As you see, in the ‘hover’ event handler it increases Radius of radial gradient in a loop

如您所见，在“悬停”事件处理程序中，它在循环中增加了径向渐变的半径

步骤3. CSS (Step 3. CSS)

To achieve the effects of another pair of images – it is sufficient to use only CSS3:

要获得另一对图像的效果–仅使用CSS3就足够了：

css / main.css (css/main.css)


.type3 {
    -webkit-mask: url(../images/mask.png) no-repeat center center;
}
.type3:hover{
    -webkit-animation: loop_frames 1s ease-in-out infinite;
     -webkit-animation-direction:alternate;
     -webkit-mask-size: auto 100%;
}
@-webkit-keyframes loop_frames {
     0% { -webkit-mask-size: auto 100%; }
     100% { -webkit-mask-size: auto 70%; }
}
.type4 {
    -webkit-transition: -webkit-mask-position 0.5s ease;
    -webkit-mask-size: 400px 300px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
    -webkit-mask-position-x: 400px;
}
.type4:hover {
     -webkit-mask-position-x: 0;
}


.type3 {
    -webkit-mask: url(../images/mask.png) no-repeat center center;
}
.type3:hover{
    -webkit-animation: loop_frames 1s ease-in-out infinite;
     -webkit-animation-direction:alternate;
     -webkit-mask-size: auto 100%;
}
@-webkit-keyframes loop_frames {
     0% { -webkit-mask-size: auto 100%; }
     100% { -webkit-mask-size: auto 70%; }
}
.type4 {
    -webkit-transition: -webkit-mask-position 0.5s ease;
    -webkit-mask-size: 400px 300px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
    -webkit-mask-position-x: 400px;
}
.type4:hover {
     -webkit-mask-position-x: 0;
}

As you see, for the third effect we use -webkit-mask-size property (to simulate some beats), for the fourth – we change -webkit-mask-position-x param. We change both params using :hover selector (in case if we hover our images).

如您所见，对于第三个效果，我们使用-webkit-mask-size属性(模拟一些节拍)，对于第四个效果，我们更改了-webkit-mask-position-x参数。我们使用：hover选择器来改变这两个参数(以防我们将图像悬停)。

现场演示

结论 (Conclusion)

That’s all. I’ve just gave you several examples of nice image effects with using of masks. I’m sure that it will be very useful for you. Good luck and welcome back

就这样。我刚刚为您提供了一些使用蒙版的漂亮图像效果的示例。我相信它将对您非常有用。祝你好运，欢迎回来