一生与你擦肩而过 歌手：阿悠悠
<style>
#papa { margin: auto; left: -274px;top:150px;width: 1400px; height: 800px; background: url('https://wx.ttt.dj/data/nfs/img/ayy21.gif ') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .5;}
#papa::before { position: absolute; content: ''; width: 100%; height: 100%;}
#mplayer { position: absolute; top:670px; left: 950px;z-index: 9; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 250px; font: bold 2.4em sans-serif; color: hsl(120,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(160deg,hsla(160,100%,50%,.75),hsla(180,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#plane1{position: absolute;left: 0px;top: 0;width: 20px;offset-distance: 0;offset-path: path("M800 70 Q500 180, 720 160 T1430 10");animation: move 8s linear infinite;}
#plane2 {position: absolute;left: 10px;top: 0;width: 20px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 8s linear infinite;}
#dt1{ position: absolute; width: 32px; height: 32px; top: 172px; left: 636px; }
#dt2{ position: absolute; width: 400px; height: 132px; top: 100px; left: 150px; }
#plane {position: absolute;left: 60px;top: 0;width: 200px;offset-distance: 0;offset-path: path("M0 220 Q800 440, 860 420 T1280 200");animation: move 8s linear infinite;}
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%;} }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<img id="plane1" alt="" src="https://wx.ttt.dj/data/nfs/img/danx.gif" />
<img id="plane2" alt="" src="https://wx.ttt.dj/data/nfs/img/danx.gif" />
<img id="dt1" src="https://wx.ttt.dj/data/nfs/img/xx.jpg" alt="" />
<img id="dt2" src="https://wx.ttt.dj/data/nfs/img/ayy21.png" alt="" />
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<svg id="mplayer" width="360" height="60" style="user-select: none;">
<rect x="50" y="25" rx="6" ry="6" width="200" height="12" stroke="hsla(60,80%,92%,.75)" fill="hsla(60,100%,92%,.35)" id="track" />
<rect x="50" y="25" rx="6" ry="6" width="0" height="12" stroke="transparnet" fill="hsla(60,80%,92%,.75)" id="prog" />
<text x="260" y="31" font-size="14" dominant-baseline="middle" stroke="none" fill="gold" id="audtime">00:00 | 00:00</text>
<text x="10" y="35" font-size="40" dominant-baseline="middle" stroke="yellow" fill="gold" id="btnplay" style="cursor: pointer;">☀
<animateTransform attributeName="transform" dur="4s" type="rotate" from="0 26.86 30" to="360 26.86 30" repeatCount="indefinite" />
</text>
</svg>
</div>
<script>
(function() {
let mp = { len: track.getAttribute('width')*1, x: track.getAttribute('x')*1 }, aud = new Audio(), mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'https://wx.ttt.dj/data/nfs/mp3/ayy.mp3 ';
aud.loop = true;
aud.autoplay = true;
if(aud.paused) mplayer.pauseAnimations();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - mp.x) / mp.len;
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('pause', () =>mState());
aud.addEventListener('play', () =>mState());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('width', aud.currentTime * 200 / aud.duration + 'px');audtime.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {cKey = j;if(mKey === j) showLrc(lrcAr);else continue;}}});
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let mState = () => aud.paused ? (mplayer.pauseAnimations(),lrc.style.setProperty('--state', 'paused'),papa.style.setProperty('--opt','0')) : (mplayer.unpauseAnimations(), lrc.style.setProperty('--state', 'running'),papa.style.setProperty('--opt','.25'));
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><br><br><br> 自己先循环听{:9007:} 宁静 发表于 2022-11-5 14:19
自己先循环听
一起欣赏{:10_402:}
静周末愉快，上来听会儿歌，介歌好听，喜欢{:10_402:} 这歌我哼过，很喜欢这歌，宁静制作的也是漂亮{:10_402:} 频谱和播放器一种颜色，漂亮{:10_402:} 今天准备碰运气{:9001:} 10个帖，看看今天的手气 倒计时还有2个回复 最后一次{:9001:}