美人吟TO：猫猫（学习黑黑“窒息”播放器制作）
<style>
#papa { left:-234px; width: 1050px; height: 700px;top:120px; background: url('https://pan.365.tf/uploads/lxx/20221025/bj0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; --opt: .8; z-index: 1; }
#papa::before { position: absolute; content: ''; background: url('https://pan.365.tf/uploads/lxx/20221025/huac.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#papa::after { position: absolute; content: '美\a人\a吟'; white-space:pre; font: bold 2.5em sans-serif; color: #ccc; top: 20px; right: 30px; text-shadow: 2px 2px 4px #000; }
#mplayer { position: absolute; bottom: 35px;left: 500px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
#btnplay { font: bold 40px / 40px serif; text-align: center; color: Tomato; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; animation: rot linear 3s infinite; }
#prog { --ww: 0px; width: 300px; height: 12px; border: 1px solid tan; border-radius: 6px; background: snow; opacity: .55; cursor: pointer; position: relative; }
#prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, pink, red); opacity: .75; }
#audtime { font: normal 14px sans-serif; color: Tomato; }
#dt1{ position: absolute; width: 40px; height: 60px; top: 450px; left: 270px; }
#dt2{ position: absolute; width: 55px; height: 55px; top: 450px; left: 186px; }
@keyframes opa { to { opacity: 0; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="papa">
<img id="dt1" src="https://pan.365.tf/uploads/lxx/20221025/mf.gif" alt="" />
<img id="dt2" src="https://pan.365.tf/uploads/lxx/20221025/hd.gif" alt="" />
<div id="mplayer">
<span id="btnplay">✹</span>
<span id="prog"></span>
<span id="audtime">00:00 | 00:00</span>
</div>
</div>
<script>
(function() {
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1437020541.mp3';
aud.loop = true;
aud.autoplay = true;
if(aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('seeked', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;prog.style.setProperty('--ww', prg + 'px');audtime.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused',papa.style.setProperty('--opt','0')) : (btnplay.style.animationPlayState = 'running', papa.style.setProperty('--opt','.8'));
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> @大猫咪
猫猫，一起欣赏这首男版美人吟{:4_173:} @马黑黑
黑黑学习做一次你这个“窒息”的播放器，微信发了非常完美{:4_173:} 一个旧图，求速度快，感觉这个播放器很漂亮的 旧图也很漂亮，小蜜蜂的加入小图好生动{:4_187:} 播放区美美哒，歌儿也好听{:4_185:} 猫咪快来收礼开心{:4_187:} 小辣椒 发表于 2022-10-25 21:06
@马黑黑
黑黑学习做一次你这个“窒息”的播放器，微信发了非常完美
主要是按钮行不行 暖色系，美得不要不要的 马黑黑 发表于 2022-10-25 21:53
主要是按钮行不行
没有不行，可以的 马黑黑 发表于 2022-10-25 21:54
暖色系，美得不要不要的
都是以前的图图，现在喜欢动图了 醉美水芙蓉 发表于 2022-10-25 21:46
欣赏小辣椒好贴！
谢谢水芙蓉欣赏{:4_204:} 千羽 发表于 2022-10-25 21:26
猫咪快来收礼开心
猫猫比较忙，我就放这里随便他什么时候来{:4_173:} 小辣椒 发表于 2022-10-25 21:59
都是以前的图图，现在喜欢动图了
动静都可以的
千羽 发表于 2022-10-25 21:25
播放区美美哒，歌儿也好听
我也是感觉这个播放器漂亮 小辣椒 发表于 2022-10-25 21:58
没有不行，可以的
有时候有些文本按钮不可用 千羽 发表于 2022-10-25 21:24
旧图也很漂亮，小蜜蜂的加入小图好生动
小蜜蜂是黑黑的{:4_189:} 马黑黑 发表于 2022-10-25 22:00
有时候有些文本按钮不可用
前面那个是图案的文本不能用，今天这个可以的 马黑黑 发表于 2022-10-25 22:00
动静都可以的
想速度快就旧图图玩，有时间就瞎弄个简单的图图做一个，动图发现网络慢的朋友们看不见，我得少用了