-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(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/4b1442569ec66dcdfed8fdf1ff81f35e.jpg)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 , #iMask        {
    
13.     width: 100%;
    
14.     position: absolute;
    
15.     top: 10%;
    
16.     left: 0px;
    
17.     height: 100%;
    
18.     mask: url(https://pic1.imgdb.cn/i/0348239ABr47zCIP6CDV2N.png)no-repeat  center / 100% 100%;
    
19.         }
    
20. 
    
21.   #pMaskV {
    
22.                 object-fit: cover;
    
23.                 opacity:0;
    
24.   }
    
25. 
    
26. </style>
    
27. <div id="pMaskTest">
    
28.   <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/1cbca08023c715c13c90c326b4733110.jpg" id="iMask" />
    
29.   <video id="pMaskV" src="https://pic.3gbizhi.com/uploads/20260506/4822f47d1ad4313f818839d8a9fc3ecc.mp4" loop autoplay muted > <//video>
    
30. </div>
    
31. <script>
    
32. const mvs = [
    
33. "https://pic.3gbizhi.com/uploads/20260815/9a185ed8481cf0ca38baf07e0ac55f7b.mp4",
    
34. "https://pic.3gbizhi.com/uploads/20260815/be7dd1ad5aac835516f9932cc72f6315.mp4",
    
35. "https://pic.3gbizhi.com/uploads/20260811/0c53eb1b71ef19e12ac23ddf045d7886.mp4",
    
36. "https://pic.3gbizhi.com/uploads/20260811/9ffe7109678b08b954161c78a172fe17.mp4",
    
37. "https://pic.3gbizhi.com/uploads/20260807/132c6375c4c37c9673714bce575e3b30.mp4",
    
38. "https://pic.3gbizhi.com/uploads/20260807/4a2a5c76d7cc19ea8982b80a6396022c.mp4",
    
39. "https://pic.3gbizhi.com/uploads/20260603/3549ac7ed712e31ff11a6cc90d987287.mp4",
    
40. "https://pic.3gbizhi.com/uploads/20260506/4822f47d1ad4313f818839d8a9fc3ecc.mp4",
    
41. ];
    
42. let imgIdx = 0;
    
43. pMaskTest.onmouseenter = () =>        {
    
44.                 iMask.style.opacity = 0;
    
45.                 pMaskV.style.opacity = 1;
    
46.                 pMaskV.src = mvs[imgIdx++];
    
47.                 imgIdx %= mvs.length;
    
48. }
    
49. pMaskTest.onmouseleave = () =>        {
    
50.                 iMask.style.opacity = 1;
    
51.                 pMaskV.style.opacity = 0;
    
52. }
    
53. </script>

复制代码