下一次相遇 TO：老头节日快乐！
<style>#papa { left: -404px; width: 1400px; height: 800px; top: 150px;background: #ccc url('https://wj.zp68.com/lxx/yunhua/2022/10/02/ltbj.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute;left: 900px; width: 200px; height: 270px;top: 480px;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, rgba(200,0,0,.75), rgba(0,255,20,.45)); border-radius: 50%; opacity: 1; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#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: 200px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,255,20,.45), rgba(255,0,0,.5) 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: snow; text-shadow: 1px 1px 0 #111; }
#lrc { position: absolute; left: 114px; top: 110px; font: bold 2.6em sans-serif; color: rgba(0,100,20,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 5s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(0,255,20,.8); overflow: hidden; white-space: nowrap; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#tree { position: absolute;left: 950px; width: 200px; height: 300px; top: 320px; mix-blend-mode: multiply; }
#bird { position: absolute; left: 414px; width: 36px; height: 63px; background: transparent url('https://wj.zp68.com/lxx/yunhua/2022/10/02/lt63.gif') no-repeat; }
#bird::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; bottom:-250%; filter: blur(1px); transform:scaleY(-1); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img id="tree" src="https://wj.zp68.com/lxx/yunhua/2022/10/02/ltdl.gif" alt="" />
<div id="bird"></div>
<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, mFlag = true, aud = new Audio();
let lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'https://wj.zp68.com/lxx/yunhua/20211221/01.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, rgba(0,255,20,.45), rgba(255,0,0,.5) ' + aud.currentTime / aud.duration * 100 + '%, rgba(255,255,255,.35) 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>
<br><br><br><br><br><br><br><br><br><br> @东篱闲人 老头，节日快乐~~~以后不能搞失踪，我会记挂你的{:4_170:} 师傅你是真能鼓捣啊，这又是从哪鼓捣出来的？{:4_170:} 欣赏老头磁性的男声，假老头一直低调，唱歌不要太好听的{:4_178:} 也祝师傅节日温馨，健康快乐，永永远远。。。。。。{:4_204:} 祝福老头吃嘛嘛香，身体倍儿棒，青春永驻 长生不老~~{:4_179:} 东篱闲人 发表于 2022-10-2 21:20
师傅你是真能鼓捣啊，这又是从哪鼓捣出来的？
老头你也是棒棒的花潮一员大将{:4_178:} 这帖子精美，东篱老头的歌声美美哒 小辣椒 发表于 2022-10-2 21:23
老头你也是棒棒的花潮一员大将
错。老蒋。。。{:4_170:} 豆儿 发表于 2022-10-2 21:24
这帖子精美，东篱老头的歌声美美哒
你好像没听过歌的。。。{:4_172:} 你俩风格还真一样啊。。{:4_204:}{:4_204:} 这是你老亲自唱的啊？我噗。。。。。。。。。。。{:4_189:} 东篱闲人 发表于 2022-10-2 21:21
也祝师傅节日温馨，健康快乐，永永远远。。。。。。
谢谢老头，你是小辣椒的楷模，向老头学习{:4_187:} 豆儿 发表于 2022-10-2 21:24
这帖子精美，东篱老头的歌声美美哒
问好豆儿，谢谢欣赏{:4_171:} 东篱闲人 发表于 2022-10-2 21:26
错。老蒋。。。
老蒋已经升天了 红芍药 发表于 2022-10-2 21:30
这是你老亲自唱的啊？我噗。。。。。。。。。。。
感觉你们是很熟的朋友，怎么没有听过老头的翻唱？ 小辣椒 发表于 2022-10-2 21:34
感觉你们是很熟的朋友，怎么没有听过老头的翻唱？
嗯，认识好几年了，但还真没听见过他唱歌。。{:4_174:} 红芍药 发表于 2022-10-2 21:30
这是你老亲自唱的啊？我噗。。。。。。。。。。。
{:5_111:} 小辣椒 发表于 2022-10-2 21:33
老蒋已经升天了
咋还整成老蒋啦？{:4_170:}