意念（mask应用实例）

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: auto;
   
4.         width: 500px;
   
5.         height: 435px;
   
6.         background: url('https://638183.freep.cn/638183/t24/jpg/g54.jpg');
   
7.         -webkit-mask: url('https://638183.freep.cn/638183/small/61.gif') repeat;
   
8.         -webkit-mask-position: 50% 50%;
   
9.         -webkit-mask-size: 260% 260%;
   
10.         animation: masksize 26s infinite alternate linear;
    
11. }
    
12. @keyframes masksize { to { -webkit-mask-size: 0 0; } }
    
13. </style>
    
14. 
    
15. <div id="mydiv"></div>

复制代码

马黑黑

简单说明：

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

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

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

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

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

马黑黑

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

红影

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

马黑黑

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

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

红影

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

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

红影

黑黑的新效果真是层出不穷啊

马黑黑

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

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

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

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

红影

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

马黑黑

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

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

马黑黑

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

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

红影

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

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

红影

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

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

小辣椒

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

红影

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

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

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

红影

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

这脑筋动得好啊，能动出这么多炫目的效果呢

马黑黑

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

这是数学问题

马黑黑

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

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

马黑黑

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

多拖拖地板都可以的