论坛 › 马黑黑教程专版 › 意念（mask应用实例）

马黑黑 发表于 2024-2-7 19:35

意念（mask应用实例）

<style>
#mydiv {
        margin: auto;
        width: 500px;
        height: 435px;
        background: url('https://638183.freep.cn/638183/t24/jpg/g54.jpg');
        -webkit-mask: url('https://638183.freep.cn/638183/small/61.gif') repeat;
        -webkit-mask-position: 50% 50%;
        -webkit-mask-size: 260% 260%;
        animation: masksize 26s infinite alternate linear;
}
@keyframes masksize { to { -webkit-mask-size: 0 0; } }
</style>

<div id="mydiv"></div>

马黑黑 发表于 2024-2-7 19:36

代码
<style>
#mydiv {
        margin: auto;
        width: 500px;
        height: 435px;
        background: url('https://638183.freep.cn/638183/t24/jpg/g54.jpg');
        -webkit-mask: url('https://638183.freep.cn/638183/small/61.gif') repeat;
        -webkit-mask-position: 50% 50%;
        -webkit-mask-size: 260% 260%;
        animation: masksize 26s infinite alternate linear;
}
@keyframes masksize { to { -webkit-mask-size: 0 0; } }
</style>

<div id="mydiv"></div>

马黑黑 发表于 2024-2-7 19:42

简单说明：

使用周边有透明度的GIF图片做遮罩（mask），遮罩重复（repeat），遮罩位置在中心（50% 50%），开始时遮罩尺寸为 260% 260%（以便整图得以完整显示），动画中动画终点遮罩为 0 0（完全不显示图片）。

遮罩原理：遮罩体（本例的 gif 图片)透明的部分将遮盖其底下的图形，非透明的部分显示其底下的图形。

重复遮盖，即以遮盖图片的尺寸大小平铺原始元素尺寸。

遮盖可以设计位置，本例设置元素的中心。

遮盖可以设置大小，动画从 260% 260% 到 0 0 往复变化。

马黑黑 发表于 2024-2-7 19:46

本帖最后由 马黑黑 于 2024-2-7 20:33 编辑

在较新版Chromium内核所有浏览器，在Firefox浏览器，均测试通过

红影 发表于 2024-2-7 20:32

这个太奇特了，就这么点代码，就能营造出这么奇特的效果。{:4_199:}
那女孩真的像是在用意念发功呢{:4_173:}

马黑黑 发表于 2024-2-7 20:35

红影 发表于 2024-2-7 20:32
这个太奇特了，就这么点代码，就能营造出这么奇特的效果。
那女孩真的像是在用意念发功呢{:4_173 ...

普通图片放大后会有锯齿，这个时候，svg图片就有优势了

红影 发表于 2024-2-7 20:37

动画中动画终点遮罩为 0 0（完全不显示图片）。

其实0只是瞬间，底图一直都能看到呢{:4_173:}

红影 发表于 2024-2-7 20:38

黑黑的新效果真是层出不穷啊{:4_199:}

马黑黑 发表于 2024-2-7 20:39

红影 发表于 2024-2-7 20:37
动画中动画终点遮罩为 0 0（完全不显示图片）。

其实0只是瞬间，底图一直都能看到呢

如果不是动画，这样赋值给mask，图片就会不显示。

所以，这里你应该能理解之前的帖子 @keyframes 的两个百分比

红影 发表于 2024-2-7 20:39

这图图放大到260时，感觉边缘有锯齿形状呢，若是svg图像就没这问题了吧。

马黑黑 发表于 2024-2-7 20:40

红影 发表于 2024-2-7 20:39
这图图放大到260时，感觉边缘有锯齿形状呢，若是svg图像就没这问题了吧。

看6楼。为什么我一定要介绍svg，现在知道了吧

马黑黑 发表于 2024-2-7 20:41

红影 发表于 2024-2-7 20:38
黑黑的新效果真是层出不穷啊

没有呀，都是在原有基础上动点歪脑子而已

红影 发表于 2024-2-7 20:46

马黑黑 发表于 2024-2-7 20:40
看6楼。为什么我一定要介绍svg，现在知道了吧

呀，我光顾着闷头看帖子，都没看到你已经回复了呢{:4_173:}

红影 发表于 2024-2-7 20:47

马黑黑 发表于 2024-2-7 20:35
普通图片放大后会有锯齿，这个时候，svg图片就有优势了

是的，从这个帖子里更感受到了sv图片的妙处了。

小辣椒 发表于 2024-2-7 20:48

哇塞，眼睛看的目不暇接，变化太多了，黑黑这个效果有点炫酷的{:4_178:}

红影 发表于 2024-2-7 20:49

马黑黑 发表于 2024-2-7 20:39
如果不是动画，这样赋值给mask，图片就会不显示。

所以，这里你应该能理解之前的帖子 @keyframes 的两 ...

是的，可以设定它在什么时间段上多停留时间了。

红影 发表于 2024-2-7 20:50

马黑黑 发表于 2024-2-7 20:41
没有呀，都是在原有基础上动点歪脑子而已

这脑筋动得好啊，能动出这么多炫目的效果呢{:4_199:}

马黑黑 发表于 2024-2-7 20:50

红影 发表于 2024-2-7 20:49
是的，可以设定它在什么时间段上多停留时间了。

这是数学问题

马黑黑 发表于 2024-2-7 20:51

小辣椒 发表于 2024-2-7 20:48
哇塞，眼睛看的目不暇接，变化太多了，黑黑这个效果有点炫酷的

这个只是用一个GIF动画做遮罩

马黑黑 发表于 2024-2-7 20:51

红影 发表于 2024-2-7 20:50
这脑筋动得好啊，能动出这么多炫目的效果呢

多拖拖地板都可以的

查看完整版本: 意念（mask应用实例）