七夕 --- 视频融合试验

夕阳黄昏

鼠标移入画面换视频

夕阳黄昏

1. 鼠标移入画面换视频
   
2. <style>
   
3.   :root {
   
4.     --w: 1152px;
   
5.     --h: 648px;
   
6.   }
   
7. 
   
8.   #pMaskTest {
   
9.     margin: auto;
   
10.     width: var(--w);
    
11.     height: var(--h);
    
12.     position: relative;
    
13.     overflow: hidden;
    
14.     border-radius: 32px;
    
15.     box-shadow: 4px 4px 10px black;
    
16.   }
    
17. 
    
18.   #pMaskV {
    
19.     position: absolute;
    
20.     width: 100%;
    
21.     height: 100%;
    
22.     top: 0;
    
23.     left: 15%;
    
24.     object-fit: cover;
    
25.     mask: url(#tMask);
    
26.     z-index: 20;
    
27.   }
    
28. 
    
29.   #vid0 {
    
30.     z-index: 10;
    
31.     position: absolute;
    
32.     width: 100%;
    
33.     height: 100%;
    
34.     top: 0;
    
35.     left: 0;
    
36.     object-fit: cover;
    
37.     mask: url(#sMask);
    
38.   }
    
39. </style>
    
40. <div id="pMaskTest">
    
41.   <video id="pMaskV" src="https://img2.tukuppt.com/video_show/15653652/01/31/20/62d4eb21736e0.mp4" autoplay loop muted></video>
    
42.   <video id="vid0" src="https://img2.tukuppt.com/video_show/2422006/00/02/12/5b51b06fd5101.mp4" autoplay loop muted></video>
    
43. </div>
    
44. <audio id="aud" src="http://music.163.com/song/media/outer/url?id=396860.mp3" autoplay loop></audio>
    
45. <svg>
    
46.   <defs>
    
47.     <radialGradient id="gradient" cx="20%" cy="50%" r="100%">
    
48.       <stop offset="0%" stop-color="hsl(60, 80%, 55%)" />
    
49.       <stop offset="100%" stop-color="hsl(0, 0, 100%)" />
    
50.     </radialGradient>
    
51.     <mask id="sMask">
    
52.       <rect x="0" y="0" fill="url(#gradient)" />
    
53.     </mask>
    
54.     <linearGradient id="Gradient0">
    
55.       <stop offset="0" stop-color="transparent" />
    
56.       <stop offset=".5" stop-color="white" />
    
57.     </linearGradient>
    
58.     <mask id="tMask">
    
59.       <rect x="0" y="0" fill="url(#Gradient0)" />
    
60.     </mask>
    
61.   </defs>
    
62. </svg>
    
63. <script>
    
64.   let rect = sMask.querySelector('rect');
    
65.   let hVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h'));
    
66.   let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
    
67.   rect.setAttribute('width', wVal);
    
68.   rect.setAttribute('height', hVal);
    
69.   rect = tMask.querySelector('rect');
    
70.   rect.setAttribute('width', wVal);
    
71.   rect.setAttribute('height', hVal);
    
72.   const mvs = ["https://img2.tukuppt.com/video_show/15653652/01/31/19/62d4c3d754df3.mp4", "https://img2.tukuppt.com/video_show/14038878/01/29/68/62a6c11c15aad.mp4", "https://img2.tukuppt.com/video_show/2418175/00/02/29/5b549a9fe3580.mp4", "https://img2.tukuppt.com/video_show/15653652/01/31/20/62d4eb21736e0.mp4", ];
    
73.   let imgIdx = 0;
    
74.   pMaskTest.addEventListener("mouseover", (event) => {
    
75.     pMaskV.src = mvs[imgIdx];
    
76.     imgIdx++;
    
77.     imgIdx %= mvs.length;
    
78.   });
    
79. </script>

复制代码

梦江南

都是用视频进行切换，而且融合非常自由。太棒了！

梦江南

欣赏老师带来的精彩。代码收藏学习。

梦江南

辛苦 了，祝你幸福安康！

夕阳黄昏

梦江南 发表于 2026-8-17 18:43
都是用视频进行切换，而且融合非常自由。太棒了！

谢谢欣赏支持！ 晚上好！

夕阳黄昏

梦江南 发表于 2026-8-17 18:45
辛苦 了，祝你幸福安康！

今天初五，七月七还有两天。

梦江南

夕阳黄昏 发表于 2026-8-17 18:56
今天初五，七月七还有两天。

其实七夕是年轻人的事，跟我们无关了。

夕阳黄昏

梦江南 发表于 2026-8-17 19:01
其实七夕是年轻人的事，跟我们无关了。

也是商家赚钱的好时机