七夕 --- 视频融合试验
鼠标移入画面换视频<style>
:root {--w:1152px; --h:648px;}
#pMaskTest {margin:32px auto 32px calc(50% -657px);
width: var(--w);
height: var(--h);
position: relative;overflow: hidden;
border-radius:32px;
box-shadow:4px 4px 10px black;
background: gray;
}
#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 %= mvs.length;
});
</script>
本帖最后由 夕阳黄昏 于 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 %= mvs.length;
});
</script> 都是用视频进行切换，而且融合非常自由。太棒了！{:4_187:} 欣赏老师带来的精彩。代码收藏学习。{:4_204:} 辛苦 了，祝你幸福安康！{:4_171:} 梦江南 发表于 2026-8-17 18:43
都是用视频进行切换，而且融合非常自由。太棒了！
谢谢欣赏支持！ 晚上好！ 梦江南 发表于 2026-8-17 18:45
辛苦 了，祝你幸福安康！
今天初五，七月七还有两天。 夕阳黄昏 发表于 2026-8-17 18:56
今天初五，七月七还有两天。
其实七夕是年轻人的事，跟我们无关了。 梦江南 发表于 2026-8-17 19:01
其实七夕是年轻人的事，跟我们无关了。
也是商家赚钱的好时机{:5_117:} 有情人终成眷属。 梦油 发表于 2026-8-17 19:48
有情人终成眷属。
美好的愿望{:5_106:}
谢谢欣赏支持！晚上好！ 好美的画面{:4_171:} 玫瑰 发表于 2026-8-17 20:39
好美的画面
谢谢欣赏支持！晚上好！ 夕阳黄昏 发表于 2026-8-17 20:49
谢谢欣赏支持！晚上好！
全都是MP4 老师太有才了，视频制作精美{:4_199:} 祝福论坛的朋友们七夕快来！ 测试效果完美，好听好看，谢谢夕阳老师精彩示范{:4_190:} 夕阳黄昏晚上好~~
有了您的整理，这个效果做起来轻松多了，为此，致以最真挚个谢意！代码已经收藏，很是赞佩！！祝吉祥快乐，晚安~~{:4_204:}{:4_190:}
我把这个帖子抱走了，很是喜欢！转载会著名出处，谢谢！{:4_199:}
、
玫瑰 发表于 2026-8-17 20:58
全都是MP4
谢谢欣赏支持！ 早上好！
页:
[1]
2