《Ancestral Land》（学习黑黑《一生所爱》代码效果）
<style>#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 700px; background: url('https://pic.imgdb.cn/item/66349df60ea9cb140367c7bd.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
#player { position: absolute; width: 140px;mix-blend-mode: screen;left: 60px; top: 480px; cursor: pointer; pointer-events: auto; animation: rot 12s linear infinite var(--state); z-index: 2; }
#player:nth-of-type(2) {left: 970px; top: 480px;}
#player:nth-of-type(3) {left: 270px; top: 365px; width: 100px; }
#player:nth-of-type(4) {left: 800px; top: 365px; width: 100px; }
#player:nth-of-type(5) {left: 510px; top: 165px; width: 160px; opacity: 0.95; }
#canv { position: absolute; top: -120px; left: -20px; display: block; mix-blend-mode: screen; pointer-events: none; }
.vid { position: absolute; width: 100%; height: calc(100% + 120px); object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
.vid { position: absolute; object-fit: cover; mix-blend-mode: screen; opacity: 0.95; pointer-events: none; }
.vid:nth-of-type(1) {bottom: -50px; }
.vid:nth-of-type(2) { bottom: -60px; opacity: 0.35;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=562822852" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb96f484078_10s_big.mp4" loop muted></video>
<canvas id="canv"></canvas>
<img id="player" src="https://pic.imgdb.cn/item/6634a3c20ea9cb140376d1dc.png" alt="" />
<img id="player" src="https://pic.imgdb.cn/item/6634a3c20ea9cb140376d1dc.png" alt="" />
<img id="player" src="https://pic.imgdb.cn/item/6634a3c20ea9cb140376d1dc.png" alt="" />
<img id="player" src="https://pic.imgdb.cn/item/6634a3c20ea9cb140376d1dc.png" alt="" />
<img id="player" src="https://pic.imgdb.cn/item/6634a3c20ea9cb140376d1dc.png" alt="" />
</div>
<script>
var pa = papa;
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/emmiter.js';
sF.charset = 'utf-8';
document.body.appendChild(sF);
var players = document.querySelectorAll('#player');
players.forEach(player => {
player.onclick = () => aud.paused ? aud.play() : aud.pause();
});
</script> 这个粒子效果很有神秘感，就找了个比较神秘的图图和音乐来配它了@马黑黑 {:4_187:} 本来想配4个播放器按钮在四周路两边的那些凸起上，发现它只认#player，不认.player，弄上去了，点暂停没用，就能留一个了，{:4_173:}否则多几个更有感觉。 越做越好,恩师{:4_204:}厉害！节日快乐！ 红影 发表于 2024-5-4 11:03
本来想配4个播放器按钮在四周路两边的那些凸起上，发现它只认#player，不认.player，弄上去了，点暂停没用 ...
音乐控制是在帖子中进行的，下面这句：
player.onclick = () => aud.paused ? aud.play() : aud.pause();
改装这里就好：
var players = document.querySelectorAll('.player'); //获得按钮对象数组
players.forEach(player => {
player.onclick = () => aud.paused ? aud.play() : aud.pause();
}); 马黑黑 发表于 2024-5-4 12:29
音乐控制是在帖子中进行的，下面这句：
player.onclick = () => aud.paused ? aud.play() : aud.pause ...
谢谢黑黑，已经改成4个按钮了，看看是不是比原来的好看点{:4_173:} 小文 发表于 2024-5-4 11:20
越做越好,恩师厉害！节日快乐！
谢谢小文，正好放假中，多学习几个玩{:4_173:} 红影 发表于 2024-5-4 13:50
谢谢小文，正好放假中，多学习几个玩
好好休息，注意照顾好自己！{:4_204:} 小文 发表于 2024-5-4 14:10
好好休息，注意照顾好自己！
嗯嗯，会的。谢谢小文关心{:4_187:} 红影 发表于 2024-5-4 13:49
谢谢黑黑，已经改成4个按钮了，看看是不是比原来的好看点
是的，根据帖子题意图意，这样更为丰厚，更能抬升氛围、烘托主题 马黑黑 发表于 2024-5-4 17:58
是的，根据帖子题意图意，这样更为丰厚，更能抬升氛围、烘托主题
黑黑提供的代码可以做一排过去的，现在只做了4个意思意思，谢谢黑黑{:4_187:} 这个贴子效果大气磅礴，如来到神秘的殿堂一般
影子把这个粒子效果被发挥到了极致。。{:4_199:} 四个小播的效果如定海神针一般，
似乎在驱动整个空间，
提供着无限能量{:4_199:} 影子的贴子都能给人带来惊喜
每次都有着无限创意
加上顶级代码水平，
贴子效果绝佳{:4_187:} 红影 发表于 2024-5-4 21:16
黑黑提供的代码可以做一排过去的，现在只做了4个意思意思，谢谢黑黑
阔气阔气 南无月 发表于 2024-5-4 21:28
这个贴子效果大气磅礴，如来到神秘的殿堂一般
影子把这个粒子效果被发挥到了极致。。
这个曲子叫《Ancestral Land》，祖传的地方，想起犹太人和阿拉伯人都视耶路撒冷为圣地，也带点这名字相似的意思吧，害得我都不敢用中文，直接用原曲名了。
为了圣地打得不可开交，他们共同的祖先看到后该有多悲伤啊。 南无月 发表于 2024-5-4 21:29
四个小播的效果如定海神针一般，
似乎在驱动整个空间，
提供着无限能量
这个开始没加上去，还是黑黑讲解了才弄上去的，真正起定海神针作用的还是黑黑啊{:4_173:} 南无月 发表于 2024-5-4 21:31
影子的贴子都能给人带来惊喜
每次都有着无限创意
加上顶级代码水平，
其实还是变相套用呢，黑黑的代码带来了无限可能，让我们可以展开想象的翅膀了呢{:4_173:} 马黑黑 发表于 2024-5-4 21:49
阔气阔气
在黑黑这学到新的操作多按钮的方式了，特别开心{:4_205:} 红影 发表于 2024-5-4 22:36
在黑黑这学到新的操作多按钮的方式了，特别开心
这个早就展示过了，应该早会了