喧嚣
<style>#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/xuanxiao.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, hsla(120,10%,20%,.65), hsla(120,50%,50%,.65)); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .7s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 16px; background: linear-gradient(90deg, hsla(120,50%,10%,.55), hsla(120,100%,50%,.65) 50%, hsla(0,100%,100%,.45) 0); border: 1px solid hsla(0,100%,100%,.45); font: normal 14px / 16px sans-serif; color: hsl(300,50%,20%); }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#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%,.75),hsla(120,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/Pic/81/cat1.webp" alt="" style="position: absolute; transform: translate(-80px, 60px); mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=1413623407.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(120,50%,10%,.55), hsla(120,100%,50%,.65) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,100%,100%,.45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', 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 toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
</script>
节前走不少小地方。路过此处，感觉热闹非凡，也觉得异常喧嚣，但薛定谔的猫和其主人似乎能在闹腾中自寻乐趣，于是说服他们摆个pose，为做帖准备素材。
喧嚣是生活繁华的体现，夜市模式即将开启…… 哈哈，那猫咪和主人摆了相似的pose呢，太可爱了{:4_173:} 红影 发表于 2022-10-1 09:06
哈哈，那猫咪和主人摆了相似的pose呢，太可爱了
还不错的 薛定谔的猫，好吧，那女孩姓薛{:4_189:} 红影 发表于 2022-10-1 09:07
薛定谔的猫，好吧，那女孩姓薛
外号，花名{:4_173:} 马黑黑 发表于 2022-10-1 09:06
还不错的
夜晚出没的黑猫，很诱惑{:4_173:} 黑黑朋友独辟蹊径创作出令人感叹的作品，赞，赞，赞！祝黑黑朋友节日快乐！ 马黑黑 发表于 2022-10-1 09:08
外号，花名
不确定性，决定了她可能姓薛也可能不是，没去询问前，保持不确定。 红影 发表于 2022-10-1 10:40
不确定性，决定了她可能姓薛也可能不是，没去询问前，保持不确定。
我认识呀，所以，确定 梦油 发表于 2022-10-1 10:36
黑黑朋友独辟蹊径创作出令人感叹的作品，赞，赞，赞！祝黑黑朋友节日快乐！
节日好 红影 发表于 2022-10-1 10:36
夜晚出没的黑猫，很诱惑
猫基本上是夜行动物 马黑黑 发表于 2022-10-1 10:48
节日好
谢谢黑黑朋友的美好祝福。 梦油 发表于 2022-10-1 10:55
谢谢黑黑朋友的美好祝福。
喝水{:4_191:} 马黑黑 发表于 2022-10-1 10:47
我认识呀，所以，确定
你不能破坏不确定性，否则就不是薛定谔了呀{:4_170:} 马黑黑 发表于 2022-10-1 10:48
猫基本上是夜行动物
还有猫一样的那美女{:4_189:} 我走过不少地方，在花潮论坛看到一派兴兴向荣的景象，黑黑老师引领大家开创代码音画新天地，向您致敬！国庆节快乐！ 相约爱晚亭 发表于 2022-10-1 11:25
我走过不少地方，在花潮论坛看到一派兴兴向荣的景象，黑黑老师引领大家开创代码音画新天地，向您致敬！国庆 ...
大家一起玩玩 红影 发表于 2022-10-1 11:18
还有猫一样的那美女
有些生意无法选择时间 红影 发表于 2022-10-1 11:18
你不能破坏不确定性，否则就不是薛定谔了呀
不确定性是可以破坏的，确定性也一样。世界的神奇，就是因了破坏两字。