-webkit-mask 遮罩3 【倒入两张图片】

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2026-8-16 17:18 编辑 [/i]

遮罩巧用

亚伦影音工作室

最近看到抖音特效里的效果双重曝光视频，很想尝试用代码制作，现在终于出炉，有待加入视频和粒子等修饰！望友友们大胆发挥！

pic.3gbizhi.com/uploads/20260815/9a185ed8481cf0ca38baf07e0ac55f7b.mp4


pic.3gbizhi.com/uploads/20260815/be7dd1ad5aac835516f9932cc72f6315.mp4


https://pic.3gbizhi.com/uploads/ ... ac23ddf045d7886.mp4


https://pic.3gbizhi.com/uploads/ ... 4161c78a172fe17.mp4


pic.3gbizhi.com/uploads/20260807/132c6375c4c37c9673714bce575e3b30.mp4


https://pic.3gbizhi.com/uploads/ ... 982b80a6396022c.mp4

https://pic.3gbizhi.com/uploads/ ... 11a6cc90d987287.mp4

pic.3gbizhi.com/uploads/20260506/4822f47d1ad4313f818839d8a9fc3ecc.mp4

梦油

欣赏佳作，问候林亚伦。

夕阳黄昏

鼠标进入切换

夕阳黄昏

1. <style>
   
2.   #pMaskTest {
   
3.     margin: 20px auto;
   
4.     width: 650px;
   
5.     height: 1080px;
   
6.     background: #000000 url([img]https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/4b1442569ec66dcdfed8fdf1ff81f35e.jpg[/img])no-repeat 0 -50px/ cover;
   
7.     box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
   
8.     position: relative;
   
9.     overflow: hidden;
   
10.   }
    
11. 
    
12.   #pMaskV {
    
13.     width: 100%;
    
14.     position: absolute;
    
15.     top: 5%;
    
16.     left: 0px;
    
17.     height: 100%;
    
18.                 object-fit: cover;
    
19.     -webkit-mask: url([img]https://pic1.imgdb.cn/i/0348239ABr47zCIP6CDV2N.png[/img])no-repeat  center / 100% 100%;
    
20.   }
    
21. 
    
22. </style>
    
23. <div id="pMaskTest">
    
24.   <!--img id="pcm" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/1cbca08023c715c13c90c326b4733110.jpg"> </img-->
    
25.   <video id="pMaskV" src="https://pic.3gbizhi.com/uploads/20260506/4822f47d1ad4313f818839d8a9fc3ecc.mp4" loop autoplay muted > <//video>
    
26. </div>
    
27. <script>
    
28. const mvs = [
    
29. "https://pic.3gbizhi.com/uploads/20260815/9a185ed8481cf0ca38baf07e0ac55f7b.mp4",
    
30. "https://pic.3gbizhi.com/uploads/20260815/be7dd1ad5aac835516f9932cc72f6315.mp4",
    
31. "https://pic.3gbizhi.com/uploads/20260811/0c53eb1b71ef19e12ac23ddf045d7886.mp4",
    
32. "https://pic.3gbizhi.com/uploads/20260811/9ffe7109678b08b954161c78a172fe17.mp4",
    
33. "https://pic.3gbizhi.com/uploads/20260807/132c6375c4c37c9673714bce575e3b30.mp4",
    
34. "https://pic.3gbizhi.com/uploads/20260807/4a2a5c76d7cc19ea8982b80a6396022c.mp4",
    
35. "https://pic.3gbizhi.com/uploads/20260603/3549ac7ed712e31ff11a6cc90d987287.mp4",
    
36. "https://pic.3gbizhi.com/uploads/20260506/4822f47d1ad4313f818839d8a9fc3ecc.mp4",
    
37. ];
    
38. let imgIdx = 0;
    
39. pMaskTest.onmouseenter = () =>        {
    
40.                 pMaskV.src = mvs[imgIdx++];
    
41.                imgIdx %= mvs.length;
    
42. }
    
43. </script>

复制代码