海阔天空
<div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb"><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_274252">
<table cellspacing="0" cellpadding="0" border="0" class=""><td valign="top" background="source/plugin/qzom_thread/images/4/UWIdp3UW.png"><a href="javascript:void(0)"></a></td><td background="source/plugin/qzom_thread/images/4/pvsKylWS.png"><div class="t_f"><style>
#papa { left: -260px; top:00px;width: 1024px; height: 600px; background: gray url('http://bbs.cnzv.cc/pan/qun91530683/2022/08/11/d7c534226158a9cdc5371c8667390291.jpg') no-repeat center/cover;box-shadow: 3px 3px 10px #000; position: relative; z-index: 1; }
#player { padding: 10px; position: absolute; left: 20px; bottom: 20px; width: fit-content; height: fit-content; display: flex; gap: 10px; flex-direction: column; }
#lrctext { margin: 20px auto;font-family:华文隶书;font-size: 32px;color: #FF0078; -webkit-background-clip: text;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
-webkit-text-fill-color: transparent;
background-color: red;
background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
background-repeat:no-repeat;
background-position: -800px 0;
-webkit-animation:loop 3s linear infinite;text-align: center; }
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 32px; height: 32px; display: grid; place-items: center; background: #CCCCCC; border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: orange; }
#btnplay {width: 12px; height: 12px; background: #000000; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 13px; border-style: solid; border-width: 0px 4px; border-color: transparent #000000; display: none; }
#prgline { width: 800px; height: 2px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 2px; cursor: pointer;}
#tmsg { font: normal 16px sans-serif; color: #CCCCCC; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
#canv { margin: auto; display: block; position: relative; border: 1px solid; }
@-webkit-keyframes loop{
0%{background-position: -800px 0;}
100%{background-position: -0 0;}
}
</style>
<div id="papa">
<div id="player">
<div id="lrctext">海阔天空 </div>
<div id="btnwrap">
<span id="btnmain"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prgline"></span><span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>
<script>
let lrcAr =[
['0.0','海阔天空 - Beyond'],
];
let aud = new Audio();
aud.src = 'https://www.qqmc.com/mp3/music5886682.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.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>
</div> 欣赏楼主的新作，多谢分享！点赞 欣赏一下，谢谢。
页:
[1]