七夕 --- 视频融合试验

夕阳黄昏 · 发表于 2026-8-17 18:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

鼠标移入画面换视频

夕阳黄昏 · 发表于 2026-8-17 18:02

本帖最后由夕阳黄昏于 2026-8-17 18:09 编辑

鼠标移入画面换视频
<style>
:root {
--w: 1152px;
--h: 648px;
}
#pMaskTest {
margin: auto;
width: var(--w);
height: var(--h);
position: relative;
overflow: hidden;
border-radius: 32px;
box-shadow: 4px 4px 10px black;
}
#pMaskV {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 15%;
object-fit: cover;
mask: url(#tMask);
z-index: 20;
}
#vid0 {
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
mask: url(#sMask);
}
</style>
<div id="pMaskTest">
<video id="pMaskV" src="https://img2.tukuppt.com/video_show/15653652/01/31/20/62d4eb21736e0.mp4" autoplay loop muted></video>
<video id="vid0" src="https://img2.tukuppt.com/video_show/2422006/00/02/12/5b51b06fd5101.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=396860.mp3" autoplay loop></audio>
<svg>
<defs>
<radialGradient id="gradient" cx="20%" cy="50%" r="100%">
<stop offset="0%" stop-color="hsl(60, 80%, 55%)" />
<stop offset="100%" stop-color="hsl(0, 0, 100%)" />
</radialGradient>
<mask id="sMask">
<rect x="0" y="0" fill="url(#gradient)" />
</mask>
<linearGradient id="Gradient0">
<stop offset="0" stop-color="transparent" />
<stop offset=".5" stop-color="white" />
</linearGradient>
<mask id="tMask">
<rect x="0" y="0" fill="url(#Gradient0)" />
</mask>
</defs>
</svg>
<script>
let rect = sMask.querySelector('rect');
let hVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h'));
let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
rect.setAttribute('width', wVal);
rect.setAttribute('height', hVal);
rect = tMask.querySelector('rect');
rect.setAttribute('width', wVal);
rect.setAttribute('height', hVal);
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", ];
let imgIdx = 0;
pMaskTest.addEventListener("mouseover", (event) => {
pMaskV.src = mvs[imgIdx];
imgIdx++;
imgIdx %= mvs.length;
});
</script>