美人吟
<style>#papa { left:-100px; width: 1050px; height: 700px;top:150px; 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><br><br> 一起欣赏这首男版美人吟{:9007:} 我来先听为快！ 男的唱的比女声好听{:9001:} 楚心兰 发表于 2022-11-3 21:23
我来先听为快！
问问楼上，，美女是不是男声好听{:9001:}
跑来看男美人吟{:9005:}
也是看点多多哈，那翩飞的小蝴蝶和小蜜蜂加的很好，让画面有了生气，摇曳的花叶枝也挺美的{:10_402:}
播放器很精美啊，宁静棒棒哒{:10_401:}
宁静这制作好棒！ 好漂亮啊，歌曲也很好听