《镜中渊》（学习黑黑无尽虚空帖子效果）
<style>#mydiv { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/64b537751ddac507cc3b33e2.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; opacity: .95; overflow: hidden; z-index: 1; position: relative; --state: paused; }
#lrc { position: absolute; top: 20px; left: 20px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(240,100%,50%,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
pinpu-wrapper { position: absolute; bottom: 5%; left: 50%; transform: translate(-50%); cursor: pointer; }
pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);--psw: 6px; }
pin-pu::before { content: ''; position: absolute; left: calc(50% - var(--psw) / 2); top: -10px; width: var(--psw); height: var(--psw); border-radius: 50%; background: snow; }
.vid { position: absolute;left: 0px;top:-55px; width: 1024px; height: 695px; object-fit: cover; opacity: 0.7; mix-blend-mode: lighten; }
.vid1 { position: absolute;left: 0px;bottom:-35%; width: 1024px; height: 640px; object-fit: cover; opacity: 0.5; mix-blend-mode: lighten; clip-path: inset(57% 0 35% 0); }
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<pinpu-wrapper></pinpu-wrapper>
<div id="lrc"data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/03/7053a689479e351982d7f4dc8c96a0a8.mp3" autoplay loop></audio>
<script>
~function() {
let pinpuNum = 100, pinpuWidth = 4, pinpuHeight = 200, mKey = 0, mFlag = true, slip = 0.2;
let ppwrap = document.querySelector('pinpu-wrapper');
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (mydiv.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
~function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)}px;--du: ${Math.random() * 1.2 + 1.2}s;--delay: -${Math.random()}s;`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', calcKey, false);
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
}();
</script> 其实是昨天晚上做的帖子，因为做歌词同步时出点问题，修改好已经挺晚了，就没发。
今天上来正好看到黑黑的给频谱带帽的效果，赶紧套用进来{:4_173:} 又仙又梦幻，下方水波粼粼，还有云雾缭绕~~
歌词颜色调得新频谱十分协调……
音乐节奏感极强，欢快热烈……
图片处理得和歌词很搭，欣赏影子美贴！ 花飞飞 发表于 2023-7-18 12:32
又仙又梦幻，下方水波粼粼，还有云雾缭绕~~
歌词颜色调得新频谱十分协调……
谢谢飞飞鼓励，正好今天看到戴小白帽的频谱，赶紧弄进来试试{:4_173:} 花飞飞 发表于 2023-7-18 12:33
音乐节奏感极强，欢快热烈……
图片处理得和歌词很搭，欣赏影子美贴！
这个图图是网上找的图然后捏合到一起了{:4_170:} 把黑科技用得出神入画！大美啦！ 那戴帽的粒子简直太漂亮了！ 高山仰止！叹为观止！ 红影 发表于 2023-7-18 16:16
这个图图是网上找的图然后捏合到一起了
根据歌词整的图图，十分厉害，浑然一体{:4_187:} 红影 发表于 2023-7-18 16:15
谢谢飞飞鼓励，正好今天看到戴小白帽的频谱，赶紧弄进来试试
这戴个白点点还真的挺欢快，在这个贴子里十分好看{:4_199:}{:4_178:} 影子太腻害了，赞一个！{:4_199:} 樵歌 发表于 2023-7-18 17:06
把黑科技用得出神入画！大美啦！
跟在后面做着好玩的啊，师兄想做也能做的{:4_173:} 樵歌 发表于 2023-7-18 17:08
那戴帽的粒子简直太漂亮了！
代码是黑黑的。这首歌倒挺有趣的，要不还是做帖子估计不会遇到这歌。所以做帖也有额外的好处呢{:4_173:} 小文 发表于 2023-7-18 17:20
高山仰止！叹为观止！
谢谢小文鼓励，这个挺简单的，只是套用啊{:4_173:} 醉美水芙蓉 发表于 2023-7-18 18:16
红影高手做得漂亮！
谢谢水芙蓉美女鼓励{:4_187:} 花飞飞 发表于 2023-7-18 18:43
根据歌词整的图图，十分厉害，浑然一体
正好原本手上有张图，又去网上找个，然后捏一起去了{:4_173:} 花飞飞 发表于 2023-7-18 18:43
这戴个白点点还真的挺欢快，在这个贴子里十分好看
我把小白点提起来了点，否则到最低位置的时候，总有点侵入到下面去的感觉。 一斛珠 发表于 2023-7-18 19:47
影子太腻害了，赞一个！
谢谢珠儿的鼓励，就是作者玩的啊{:4_187:}