霜染枫丹 发表于 2026-8-18 16:11

星河谣 祝七夕快乐， 套用夕阳黄昏老师代码制作

本帖最后由 霜染枫丹 于 2026-8-18 16:13 编辑 <br /><br />鼠标移入画面换视频
<style>
:root {
    --w: 1024px;
    --h: 576px;
}

#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://imgimg.qqdsw8.cn/view.php/c27b3b7501d770b3d4c8988c194ffc5a.mp4" autoplay loop muted></video>
<video id="vid0" src="https://imgimg.qqdsw8.cn/view.php/611662d9637a83c5c64826c63b9d3c0a.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://imgimg.qqdsw8.cn/view.php/8fb7fa497802c1c99e2c1502ac9175f9.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://imgimg.qqdsw8.cn/view.php/c27b3b7501d770b3d4c8988c194ffc5a.mp4", "https://imgimg.qqdsw8.cn/view.php/122da6544f32105a7fc2a2ce338c4b86.mp4", "https://imgimg.qqdsw8.cn/view.php/79f4b3f56073794f909e62ba98f9c62e.mp4", "https://imgimg.qqdsw8.cn/view.php/8df2b300e2be5aa64422ac00573bd50b.mp4", ];
let imgIdx = 0;
pMaskTest.addEventListener("mouseover", (event) => {
    pMaskV.src = mvs;
    imgIdx++;
    imgIdx %= mvs.length;
});
</script>

玫瑰 发表于 2026-8-18 16:18

等了一下，看到很美的画面。

霜染枫丹 发表于 2026-8-18 16:18

本帖最后由 霜染枫丹 于 2026-8-18 22:09 编辑


现在AI出图月亮泛滥，七月初七哪来的皓月当空？{:4_198:}


感谢夕阳黄昏的分享，ai素材制作，祝大家七夕快乐！

霜染枫丹 发表于 2026-8-18 16:20

玫瑰 发表于 2026-8-18 16:18
等了一下，看到很美的画面。

谢谢玫瑰的支持，置换了6个视频，加载的时间就长了，挺喜欢这套代码，又多了一种渲染的样式。{:4_204:}{:4_190:}

梦江南 发表于 2026-8-18 16:21

好美的画面，祝七夕快乐。{:4_204:}

霜染枫丹 发表于 2026-8-18 16:26

梦江南 发表于 2026-8-18 16:21
好美的画面，祝七夕快乐。

谢谢梦江南的支持！使用AI生成的视频。得到支持很高兴，祝您安好！{:4_204:}{:4_190:}

梦油 发表于 2026-8-18 16:56

祝福人人幸福快乐！
问好霜染枫丹朋友。

魏淑芬 发表于 2026-8-18 17:06

新颖有趣，欣赏点赞！{:4_178:}

霜染枫丹 发表于 2026-8-18 17:33

梦油 发表于 2026-8-18 16:56
祝福人人幸福快乐！
问好霜染枫丹朋友。

感谢梦老的支持鼓励，下午好~~

七月七来了，我们送走了夏天。祝您秋安！{:4_204:}{:4_190:}

红影 发表于 2026-8-18 17:34

漂亮，欣赏枫丹好帖，七夕快乐{:4_187:}

霜染枫丹 发表于 2026-8-18 17:36

魏淑芬 发表于 2026-8-18 17:06
新颖有趣，欣赏点赞！

魏淑芬下午好~~
这种形式我以前也没见过，很有创意。感谢您的支持，祝安好！！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-8-18 17:38

红影 发表于 2026-8-18 17:34
漂亮，欣赏枫丹好帖，七夕快乐

欢迎红影，夕阳黄昏的这套代码很有欣赏性，我很喜欢。感谢红影的支持，下午好！{:4_204:}{:4_190:}

夕阳黄昏 发表于 2026-8-18 19:48

欣赏美帖！ 赞！

霜染枫丹 发表于 2026-8-18 20:05

夕阳黄昏 发表于 2026-8-18 19:48
欣赏美帖！ 赞！

欢迎夕阳黄昏，晚上好~~您的这套代码把能想到的都想到了，只要置换素材即可！特别感谢，可以用于很多场景，特别顺畅！{:4_204:}{:4_190:}

杨帆 发表于 2026-8-18 21:03

制作漂亮，谢谢分享，祝枫丹老师七夕快乐{:4_204:}

霜染枫丹 发表于 2026-8-18 21:52

杨帆 发表于 2026-8-18 21:03
制作漂亮，谢谢分享，祝枫丹老师七夕快乐

感谢扬帆的支持，晚上好！祝您七夕节快乐~~{:4_204:}{:4_190:}

梦油 发表于 2026-8-19 13:56

霜染枫丹 发表于 2026-8-18 17:33
感谢梦老的支持鼓励，下午好~~

七月七来了，我们送走了夏天。祝您秋安！

谢谢枫丹朋友美好祝福。
页: [1]
查看完整版本: 星河谣 祝七夕快乐， 套用夕阳黄昏老师代码制作