520赫兹

马黑黑 · 发表于 2022-11-10 07:53

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

花潮论坛lrc在线

00:00 | 00:00

马黑黑 · 发表于 2022-11-10 07:54

代码

<style>
#papa { margin: 120px 0 0 calc(50% - 581px); width: 1000px; height: 758px; background: gray url('https://638183.freep.cn/638183/t22/webp/520hz.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; perspective: 1000px; position: relative; z-index: 1; }
#mama { position: absolute; width: 620px; height: 620px; display: grid; grid-template-rows: repeat(8,8fr); grid-template-columns: repeat(8,8fr); border-radius: 50%; overflow: hidden; }
#mplayer { position: absolute; bottom: 10px; grid-template-columns: auto auto auto; gap: 6px; display: grid; place-items: center; font: normal 16px sans-serif; color: snow; z-index: 999; }
#btnplay, #mama { cursor: pointer; animation: rot 10s infinite linear; animation-play-state: var(--state); --state: paused; }
#prog { width: 200px; height: 20px; cursor: pointer; }
#lrc { --state: running; --motion: cover2; --tt: 1s; position: absolute; top: 10px; font: bold 2.4em sans-serif; color: hsl(240, 50%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(30, 10%, 10%, .95)); z-index: 1000; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg, hsla(240, 60%, 50%, .45), hsla(240, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mama > img, #mplayer > img { width: 40px; height: 40px; mix-blend-mode: screen; border-radius: 50%; transform-style: preserve-3d; }
#mama:hover .spark { zoom: 1.5; opacity: .95; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="papa">
<div id="mama"></div>
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<img id="btnplay" src="https://638183.freep.cn/638183/t22/gif/flash.gif" alt="" />
<progress id="prog" max="100"></progress>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1948572170.mp3" loop autoplay></audio>
<script>
(function() {
(function() {for(j=0; j<64; j++) {let ele = document.createElement('img'), size = Math.random()*50 + 10;ele.src = 'https://638183.freep.cn/638183/t22/gif/flash.gif';ele.className='spark';ele.alt = '';ele.style.cssText = `width: ${size}px;height: ${size}px;transform: rotate(${Math.random()*360}deg);opacity: .5;`;mama.appendChild(ele);}})();
let mKey = 0, mSeek = false, mFlag = true, lap = 0.5;
let lrcAr = [[0.06,"Capper - 五百二十赫兹",21.0],[22.00,"喜欢和她见面",2.0],[23.05,"可距离给的感觉",1.0],[24.07,"是忽明又忽灭",2.0],[26.05,"她谜底总是留着悬念",1.0],[27.09,"我甚至感到厌倦",1.9],[29.01,"被掐灭的香烟",1.1],[30.09,"雾锁云埋",2.0],[32.06,"总是在答案边徘徊",2.8],[35.03,"不想醒来",1.1],[36.09,"像一杯美式没冰块",2.9],[39.04,"好奇她的房间",1.1],[40.09,"坐在她的窗边",1.0],[41.09,"等她眼睛睁开",2.0],[43.08,"下雨还是晴天",1.9],[45.01,"依偎在我身边",1.0],[46.02,"调昏暗的光线",2.0],[48.02,"别再怀念有些人不值得没必要留恋",4.0],[52.03,"别再冬眠去热烈的夏天",3.1],[55.09,"Shawty like melody in my head",2.9],[58.01,"Replay iffy in my head",2.0],[60.04,"我想留住的画面",2.0],[62.05,"把心动拍成胶片",2.0],[64.05,"Shawty like melody in my head",2.0],[66.09,"Replay iffy in my head",2.9],[69,"是最熟悉的音乐",2.0],[71.03,"我却不熟练表演",2.0],[73.06,"Ouu-ouuu-ouu-ou",4.0],[77.01,"猜不透你的活动心理",2.0],[79.05,"软禁在你发的短信",2.0],[81.08,"like youu-ouu-ouu",4.0],[85.06,"读不懂你的所有神情",3.0],[88.01,"会牵动我神经",1.1],[89.08,"沉浸在落日晚风中的意外",3.0],[92.07,"树莓般的晚霞对你透着溺爱",3.0],[95.09,"在提醒我小心",1.0],[96.09,"因为一不小心我就会爱上你",4.0],[100.04,"Maybe we should link",1.0],[101.04,"我录下你的声音放进采样集",3.0],[104.06,"伴随着我的心跳在扑通扑通",2.0],[106.08,"扑到海浪里",2.0],[108.07,"这动人的情节就像收到幸运的请帖",4.5],[113,"浓度很高倒杯不流的DQ暴风雪",4.1],[117.07,"其他我看不见一起走到终点",4.0],[121.06,"数一年又一年用音乐装时间",4.0],[125.1,"像关了禁闭",1.9],[127.03,"心动的感觉总在掩饰下藏匿",2.0],[129.05,"像是深海里的宝箱里面装满金币",2.0],[131.06,"骇浪也因此骤停可你却不求名利",3.0],[134.1,"短暂的心悸",1.9],[136.01,"我还没看到你笑我怎么放弃",1.1],[137.09,"你要相信这段感情一定百无禁忌",2.9],[140.02,"下次见到你我想要",2.0],[142.06,"hold you body like this",2.9],[145.01,"hold you body like this",1.1],[146.07,"这部言情电影",3.0],[149.02,"还没公映",1.0],[150.05,"I wanna",1.0],[151.01,"hold you body like this",2.1],[153.06,"hold you body like this",2.0],[155.05,"这部言情电影",2.0],[157.1,"还没公映",2.0],[159.09,"Shawty like melody in my head",2.0],[161.08,"Replay iffy in my head",2.9],[164.01,"我想留住的画面",2.0],[166.03,"把心动拍成胶片",2.0],[168.02,"Shawty like melody in my head",2.0],[170.05,"Replay iffy in my head",2.0],[172.09,"是最熟悉的音乐",2.9],[175.02,"我却不熟练表演",2.7]];
btnplay.onclick = mama.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - lap >= lrcAr[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.setProperty('--state', 'paused'), mama.style.setProperty('--state', 'paused'), lrc.style.setProperty('--state', 'paused')) : (mama.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'), lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
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>