栖凰（致羽羽）
<style>.papa { left: -302px; width: 1200px; height: 566px; border-radius: 6px; background: tan url('https://638183.freep.cn/638183/Pic/2022/xihuang-m.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://638183.freep.cn/638183/Pic/2022/xihuang-l.jpg') no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://638183.freep.cn/638183/Pic/2022/xihuang-r.jpg') no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%,-100%) rotate(15deg); }
.papa:hover::after { transform: translate(100%,-100%) rotate(-15deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: calc(50% - 130px); top: 10px; padding: 10px; font: normal 1em sans-serif; color: purple; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="papa">
<div class="playbox">
<p id="geci">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1321874925.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
['0.00',' 作词 : 冉语优'],
['1.00',' 作曲 : 悠悠酱'],
['3.00','原唱：星尘'],
['3.04','翻唱&后期：三无MarBlue'],
['3.08','曲绘：白鄔東'],
['4.05','笛子：囚牛'],
['5.03','调教：花儿不哭'],
['6.00','混音：Mr.曾经'],
['13.06','笛子：囚牛'],
['25.01','清辉映着深堂'],
['26.06','风月入酒一觞'],
['28.01','有人已经与我饮畅'],
['31.01','却还要我当'],
['32.06','纵马白衣少年郎'],
['37.01','残棋停在掌上'],
['38.06','死局欲盖弥彰'],
['40.01','有人故作眉眼疏狂'],
['43.01','与我交过手'],
['44.06','与我留过伤'],
['46.00','却想求个美满收场'],
['48.09','谯鼓响'],
['49.08','烽烟茫茫'],
['50.09','剑影刀光'],
['52.00','阴谋阳谋'],
['52.08','影影幢幢'],
['55.01','这生死场上'],
['56.05','有谁真愿谁'],
['58.01','无恙'],
['60.08','兴许'],
['61.05','青竹早凋'],
['62.10','碧梧已僵'],
['64.05','人事本难防'],
['66.07','只在'],
['67.05','旧时旧日'],
['69.00','大梦了一场'],
['72.07','从此'],
['73.05','天各一方'],
['74.10','各自怀想'],
['76.05','不如两相忘'],
['79.01','非黄泉路上'],
['80.06','此生王不见王'],
['88.01','一夜长安冷雨'],
['89.06','几声马蹄彷徨'],
['91.02','烽火长燃撞破天光'],
['94.01','只拂一拂袖'],
['95.06','挥别了当年模样'],
['100.01','千里江山入眼'],
['101.06','谁不志在四方'],
['103.02','行到水穷不曾回望'],
['106.01','吟鞭断流水'],
['107.06','也能断情长'],
['109.00','前尘往事何必思量'],
['112.01','纵然是'],
['112.09','斯人已去'],
['113.10','天地纵广'],
['114.09','转眼又成几家沙场'],
['118.01','夜半听楼角'],
['119.06','纵马迎天光'],
['121.00','凄怆'],
['123.08','兴许'],
['124.05','青竹早凋'],
['125.10','碧梧已僵'],
['127.04','人事本难防'],
['129.07','只在'],
['130.05','旧时旧日'],
['131.10','大梦了一场'],
['135.08','从此'],
['136.06','天各一方'],
['138.00','各自怀想'],
['139.05','不如两相忘'],
['142.00','非黄泉路上'],
['143.05','此生王不见王'],
['148.01','贪痴疏狂'],
['149.06','暗自滋长'],
['151.00','变了当年模样'],
['154.01','相视一望'],
['155.05','近乎咫尺'],
['157.01','远在山岗'],
['160.01','语息温凉'],
['161.06','吞吐如霜'],
['163.01','化在你眉睫上'],
['165.07','生死一念算过场'],
['169.01','冷不防'],
['171.07','三千'],
['172.06','铁衣披霜'],
['173.10','万籁绝响'],
['175.06','举目是残阳'],
['177.07','回首'],
['178.05','剑拔弩张'],
['179.10','箭已在弦上'],
['183.07','耳畔'],
['184.05','江海有声'],
['186.00','山河无量'],
['187.05','呼万寿无疆'],
['190.01','却无人共看'],
['191.06','这人间多荒唐'],
['195.09','却无人共看'],
['198.01','这人间多荒唐']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>
哇，用凤凰来护卫，里面神女是羽羽吧{:4_203:} 这个好，展开的被隐藏了，就不会出现左右拉条了{:4_173:} 图图漂亮，展开的方式也好看，这个好。羽儿收礼开心@千羽{:4_187:} 樵歌 发表于 2022-7-1 09:46
哇，用凤凰来护卫，里面神女是羽羽吧
可以吗{:4_170:} 红影 发表于 2022-7-1 10:09
这个好，展开的被隐藏了，就不会出现左右拉条了
不吵架，不冷战，不拉锯{:4_170:} 马黑黑 发表于 2022-7-1 12:17
不吵架，不冷战，不拉锯
这个的动画比平开的更好看{:4_187:} 这个门飞走了 绿叶清舟 发表于 2022-7-1 16:59
这个门飞走了
还会回来 红影 发表于 2022-7-1 16:10
这个的动画比平开的更好看
平着开有平开的好，但羽羽可能喜欢别的开发{:4_170:} 马黑黑 发表于 2022-7-1 18:09
还会回来
因为得栖的嘛 绿叶清舟 发表于 2022-7-1 19:40
因为得栖的嘛
正解 看到有收礼了，赶快跑来{:4_187:} 好大气的唯美画面，喜欢，{:4_205:} 樵歌 发表于 2022-7-1 09:46
哇，用凤凰来护卫，里面神女是羽羽吧
哈哈，樵歌老师晚上好{:4_187:} 红影 发表于 2022-7-1 10:10
图图漂亮，展开的方式也好看，这个好。羽儿收礼开心@千羽
嗯，开心收礼，谢谢影儿{:4_179:} 马黑黑 发表于 2022-7-1 18:11
平着开有平开的好，但羽羽可能喜欢别的开发
这个就挺喜欢的，谢谢黑黑老师，{:4_187:} 千羽 发表于 2022-7-1 20:26
这个就挺喜欢的，谢谢黑黑老师，
{:4_190:} 千羽 发表于 2022-7-1 20:22
好大气的唯美画面，喜欢，
{:4_196:} 再谢黑黑老师，做美图辛苦，送花花和香茶来了{:4_187:}{:4_204:}{:4_180:}