《蜃楼》（学习黑黑《虞兮叹》代码效果）
<style>.papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/66584d93d9c307b7e974725e.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
#aCanv { position: absolute; bottom: 266px; left: calc(50% - 255px); }
.vid { position: absolute; top: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; transform: rotateX(180deg); mix-blend-mode: screen; opacity: .2; }
.vid:nth-of-type(2) { height: 24%; width: 30%;transform: rotate(10deg); mix-blend-mode: screen; opacity: .6; border-radius: 50%; top: 400px; right: 80px; }
.vid:nth-of-type(3) { height: 300px; width: 320px; mix-blend-mode: screen; opacity: .9; top: 40px; right: 10px; transform: rotateX(0deg); }
.vid:nth-of-type(4) { height: 600px; width: 590px; mix-blend-mode: screen; opacity: .25; top: 0px; left: 0px; transform: rotateX(0deg); border-radius: 0 20% 200px 0;}
</style>
<div class="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2140776001" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd8e1e6ad_10s_big.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/88/5b4c5a3a77d71_10s_big.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d_10s_big.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/22/5b5813de3541d.mp4" autoplay loop muted></video>
<canvas id="aCanv" width="530" height="440"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';
document.body.appendChild(sF);
var colors = { track: '#FAFAD2', prog: 'Wheat', btn: 'DeepPink', text: 'DeepPink' };
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> 把歌词调得和底图圆环差不多了。谢谢@马黑黑 的代码{:4_187:} 哎呀，这么晚了，真的变梦游了。撤了{:4_430:} 很神圣的感觉。 厉害 厉害啊！做得真好！{:4_187:} 樵歌 发表于 2024-5-31 06:54
很神圣的感觉。
应该是神秘吧，层层门洞，很有种穿越时间的感觉{:4_173:} 马黑黑 发表于 2024-5-31 08:31
厉害
左边放了炮火的视频，右边是时间的流逝，中间是层叠的门洞。
想找个表达穿越人类历史的歌曲，怎么也找不到{:4_173:} 梦江南 发表于 2024-5-31 08:32
厉害啊！做得真好！
多谢梦江南鼓励，我也是学着做呢，主要想熟悉一下代码{:4_187:} 红影 发表于 2024-5-31 20:12
左边放了炮火的视频，右边是时间的流逝，中间是层叠的门洞。
想找个表达穿越人类历史的歌曲，怎么也找不 ...
这不好找，除非使用木柄放大镜 红影 发表于 2024-5-31 20:10
应该是神秘吧，层层门洞，很有种穿越时间的感觉
我看师妹能把代码创造性应用的音画中，自成一体，形成了科幻、神秘、又带点机械美学的韵味在里面。这个很好，有自己的风格，不像我一样只能套用。 这个门洞图片正好把小播和歌词放进去。
影子居然调到门洞弧度刚刚好，
这个真是太不容易了。
要改变大小以及弧度。。
技术和耐心缺一不可{:4_199:}{:4_187:} 小播的大小和弧形歌词是JS打包在一起的。
能调得小播刚好在小圆洞，且暂停键在正中
歌词在大圆洞。。
巧妙之极。。{:4_187:}
战火的过去和科技的未来，穿越时空之门。。。跨越数千年。。。
影子这个贴子意境也好，喻意令人回味无穷。。
马黑黑 发表于 2024-5-31 20:41
这不好找，除非使用木柄放大镜
呵呵，后来觉得这首也不错，基本接近想要的了{:4_173:} 樵歌 发表于 2024-5-31 21:09
我看师妹能把代码创造性应用的音画中，自成一体，形成了科幻、神秘、又带点机械美学的韵味在里面。这个很 ...
套用是地一步，都是这样过来的啊，然后慢慢的就就可以调点自己想要的效果了{:4_173:} 南无月 发表于 2024-5-31 21:31
这个门洞图片正好把小播和歌词放进去。
影子居然调到门洞弧度刚刚好，
这个真是太不容易了。
月儿说到点子上了，调的时候费点劲，多试了几次。谢谢月儿，太知心了{:4_179:} 南无月 发表于 2024-5-31 21:33
小播的大小和弧形歌词是JS打包在一起的。
能调得小播刚好在小圆洞，且暂停键在正中
歌词在大圆洞。。
小播在小门洞比较好弄，这个的大小正好，否则要费点心思。歌词到大门洞少许麻烦点，调画布宽高来拟合大圆时，貌似平面位置也跟着变化了，这个之前是没料到的呢{:4_173:} 南无月 发表于 2024-5-31 21:36
战火的过去和科技的未来，穿越时空之门。。。跨越数千年。。。
影子这个贴子意境也好，喻意令人回味无穷。 ...
那个战火的视频不是后期的，所以总带点切割痕迹，弄得我只好一再降低透明度{:4_196:} 红影 发表于 2024-6-1 09:41
呵呵，后来觉得这首也不错，基本接近想要的了
是滴