积木
<style>#papa { margin: 20px 0 20px calc(50% - 581px); width: 1000px; height: 600px; background: tan; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; }
.vid:nth-of-type(2) { mix-blend-mode: soft-light; }
.vid:nth-of-type(3) { width: 160px; height: 160px; right: 10px; top: 10px; box-shadow: 0 0 6px #333; border-radius: 50%; cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2155846789" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608cac40d5011.mp4" poster="https://638183.freep.cn/638183/web/svg/3star.svg" disablePictureInPicture loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/92/5b4e94ee899b6.mp4" disablePictureInPicture loop muted></video>
<video class="vid" id="player" src="https://img.tukuppt.com/video_show/2432605/00/01/74/5b49943f362e5.mp4" poster="https://638183.freep.cn/638183/web/svg/3star.svg" title="播放/暂停" disablePictureInPicture loop muted></video>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
document.body.appendChild(sF);
sF.onload = () => LRC({papa: '#papa', lrc_css: 'top: 20px;', lrcAr: lrcAr, btn: '#player'});
papa.oncontextmenu = (e) => e.preventDefault();
var lrcAr = [, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
</script>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 581px); <span class="tBlue">width:</span> 1000px; <span class="tBlue">height:</span> 600px; <span class="tBlue">background:</span> tan; <span class="tBlue">box-shadow:</span> 3px 3px 6px gray; <span class="tBlue">z-index:</span> 1; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">user-select:</span> none; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> .vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 60px); <span class="tBlue">object-fit:</span> cover; }</cl-cd>
<cl-cd data-idx="4"> .<span class="tBlue">vid:</span>nth-of-type(2) { <span class="tBlue">mix-blend-mode:</span> soft-light; }</cl-cd>
<cl-cd data-idx="5"> .<span class="tBlue">vid:</span>nth-of-type(3) { <span class="tBlue">width:</span> 160px; <span class="tBlue">height:</span> 160px; <span class="tBlue">right:</span> 10px; <span class="tBlue">top:</span> 10px; <span class="tBlue">box-shadow:</span> 0 0 6px #333; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=2155846789"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2405811/00/73/37/608cac40d5011.mp4"</span> poster=<span class="tMagenta">"https://638183.freep.cn/638183/web/svg/3star.svg"</span> disablePictureInPicture loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2475824/00/01/92/5b4e94ee899b6.mp4"</span> disablePictureInPicture loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">video</span> class=<span class="tMagenta">"vid"</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2432605/00/01/74/5b49943f362e5.mp4"</span> poster=<span class="tMagenta">"https://638183.freep.cn/638183/web/svg/3star.svg"</span> title=<span class="tMagenta">"播放/暂停"</span> disablePictureInPicture loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="17"> sF.charset = <span class="tMagenta">'UTF-8'</span>;</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/api/lrc.js'</span>;</cl-cd>
<cl-cd data-idx="19"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="20"> sF.onload = () => LRC({<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>, lrc_<span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">top:</span> 20px;'</span>, <span class="tBlue">lrcAr:</span> lrcAr, <span class="tBlue">btn:</span> <span class="tMagenta">'#player'</span>});</cl-cd>
<cl-cd data-idx="21"> papa.oncontextmenu = (e) => e.preventDefault();</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">var</span> lrcAr = [, , ];</cl-cd>
<cl-cd data-idx="23"> <<span class="tDarkRed">/script</span>></cl-cd>
</div> 画面动感，效果酷炫，歌曲好听。{:4_199:} 南无月 发表于 2024-5-16 12:39
画面动感，效果酷炫，歌曲好听。
谢赞 黑黑总能找到这么多可爱的视频，并能适当组合，让它们发挥出惊艳的效果呢{:4_199:} 熊猫那还有这样跳舞的视频啊，我也去转悠过，没见过这样的呢{:4_173:} 这歌曲的节奏和视频效果很相配。这个帖子里的封装js和月下舞者还不同呢。代码更简洁了{:4_199:} 黑黑这个视频找的太好了效果太完美了 好美的音画，点赞！
动感十足的大制作让人拍案叫绝！ 梦油 发表于 2024-5-16 16:39
动感十足的大制作让人拍案叫绝！
{:4_190:} 老谟深虑 发表于 2024-5-16 15:44
好美的音画，点赞！
感谢支持 小辣椒 发表于 2024-5-16 15:10
黑黑这个视频找的太好了效果太完美了
还好还好 红影 发表于 2024-5-16 13:54
这歌曲的节奏和视频效果很相配。这个帖子里的封装js和月下舞者还不同呢。代码更简洁了
这个是较早前的 红影 发表于 2024-5-16 13:50
熊猫那还有这样跳舞的视频啊，我也去转悠过，没见过这样的呢
比较少 红影 发表于 2024-5-16 13:49
黑黑总能找到这么多可爱的视频，并能适当组合，让它们发挥出惊艳的效果呢
放大镜好 南无月 发表于 2024-5-16 12:39
画面动感，效果酷炫，歌曲好听。
{:4_191:} 马黑黑 发表于 2024-5-16 18:12
到了干杯的时候了{:4_199:} 马黑黑 发表于 2024-5-16 13:11
谢赞
这些视频好，最近都被白老师用到极致了。{:4_199:}
南无月 发表于 2024-5-16 20:12
这些视频好，最近都被白老师用到极致了。
错觉的吧{:4_173:}