酒馆儿 - 姜姜 （学习老黑“寂寞苍穹”制作）
本帖最后由 加林森 于 2022-9-16 10:10 编辑 <br /><br /><style>#papa{left:-214px;width:1024px;height:682px;background:tan url('https://pic.imgdb.cn/item/63231bbe16f2c2beb168d0c1.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}#mplayer{position:absolute;left:20px;bottom:0;width:300px;height:80px;user-select:none;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(0,0,255,.45),rgba(255,0,0,.35));border-radius:50%;opacity:.75}#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}#btnwrap{--yy:-15px;width:60px;height:60px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}#btnplay{width:60px;height:60px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}#btnpause{width:2px;height:60px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}#prog{--yy:20px;width:300px;height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,255,.45),rgba(255,0,0,.35) 100%,transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:gray}#lrc{position:absolute;top:60px;font:700 2em sans-serif;color:transparent;letter-spacing:2px;background:linear-gradient(-90deg,#8b0000,gold,orange,snow) 100% 0 / 200% 100%;background-clip:text;-webkit-background-clip:text;animation:bgMerge 5s linear infinite}.ball{--ss:0s;position:absolute;width:10px;height:10px;left:346px;top:300px;border-radius:50%;background:red;offset-distance:0;offset-path:path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");animation:move 6s var(--ss) linear infinite}@keyframes move{to{offset-distance:100%}}@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}</style><div id=papa><div id=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 lrcAr = [['00.00','酒馆儿-姜姜'],['3.03','老板账本不常记'],['5.65','故人故景不常忆'],['8.49','客来客散一场戏'],['11.20','台下台上并无异'],['25.75','南边儿开了家小酒馆儿'],['28.42','酒馆儿里上菜用大碗儿'],['31.37','大碗儿大碟儿赚的慢'],['34.12','朋友说老板死心眼儿'],['37.03','老板左腿有残疾'],['39.79','原本是个读书的'],['42.73','落第落难跑了妻'],['45.40','去年漂泊到此地'],['48.68','二十九年世间冷暖历'],['54.17','三生幸得此月圆缺意'],['59.66','啊~月下情难寄'],['62.80','放盐要适量 火候要适当'],['68.46','青天老爷勤孝敬 来年莫相忘'],['74.22','吃软莫欺软 吃硬莫嘴硬'],['79.75','温酒一盏 对影叙炎凉'],['97.12','南边儿开了家小酒馆儿'],['99.89','酒馆儿里上菜用大碗儿'],['102.67','大碗儿大碟儿赚的慢'],['105.63','邻居说老板缺心眼儿'],['108.57','老板账本不常记'],['111.32','故人故景不常忆'],['114.17','客来客散一场戏'],['116.89','台下台上并无异'],['119.91','二十九年世间冷暖历'],['125.60','三生幸得此月圆缺意'],['131.15','啊~月下情何寄'],['134.54','放盐要适量 火候要适当'],['139.77','青天大老爷勤孝敬 来年莫相忘'],['145.57','吃软莫欺软 吃硬莫嘴硬'],['151.21','温酒一盏 对饮叙炎凉'],['157.30','放盐要适量 火候要适当'],['162.75','青天老爷勤孝敬 这道义杯中藏'],['168.50','清酒穿浊肠 老藤攀新墙'],['174.10','月下影成双']];let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://music.163.com/song/media/outer/url?id=1900003217.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
papa.appendChild(ele);
});
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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>
@马黑黑 @东篱闲人 来喝酒。。。。{:4_189:} 嘿嘿！真乃让人拍案惊奇！
{:4_199:} 梦油 发表于 2022-9-15 17:14
嘿嘿！真乃让人拍案惊奇！
好玩吧。{:4_189:} 这个背景漂亮！{:5_116:} 这个心形虽然说是本贴的要点，但实在觉得违和。。。。 东篱闲人 发表于 2022-9-15 17:24
这个背景漂亮！
嗯嗯。 东篱闲人 发表于 2022-9-15 17:25
这个心形虽然说是本贴的要点，但实在觉得违和。。。。
我把它调整下来怎么样？ 加林森 发表于 2022-9-15 17:43
我把它调整下来怎么样？
俺个人理解哈，不一定对。觉得把它缩小放在播放器上面比较和谐点。。。。{:4_190:} 心形长在了菇凉的右胸{:4_170:} 东篱闲人 发表于 2022-9-15 17:58
俺个人理解哈，不一定对。觉得把它缩小放在播放器上面比较和谐点。。。。
啊哟，这个就考到我了。 马黑黑 发表于 2022-9-15 18:12
心形长在了菇凉的右胸
这个得费大力了。 东篱闲人 发表于 2022-9-15 17:25
这个心形虽然说是本贴的要点，但实在觉得违和。。。。
位置不对 加林森 发表于 2022-9-15 17:43
我把它调整下来怎么样？
可以的，不要这个心形，确实不合时宜 加林森 发表于 2022-9-15 18:23
这个得费大力了。
不要更好 马黑黑 发表于 2022-9-15 18:52
不要更好
哦 马黑黑 发表于 2022-9-15 18:52
可以的，不要这个心形，确实不合时宜
嗯嗯。 加林森 发表于 2022-9-15 19:03
嗯嗯。
自主判断，该砍的砍掉，该留的留，该加的加 马黑黑 发表于 2022-9-15 19:40
自主判断，该砍的砍掉，该留的留，该加的加
嗯嗯。谢谢！