|
|

楼主 |
发表于 2023-7-17 12:10
|
显示全部楼层
本帖最后由 马黑黑 于 2023-7-17 22:36 编辑
代码分享
- <style>
- #mydiv { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/2/yjhx.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; opacity: .9; overflow: hidden; z-index: 1; position: relative; --state: paused; }
- #lrc { position: absolute; top: 10px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); --motion: cover2; --tt: 5s; }
- #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
- pinpu-wrapper { position: absolute; bottom: 0; left: 50%; transform: translate(-50%); cursor: pointer; }
- pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state); }
- .mybox { position: absolute; bottom: -100px; left: calc(50% - 25px); font-size: 50px; animation: up 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: 5deg; }
- .mybox:nth-of-type(2) { --delay: -2s; --deg: -5deg; }
- .mybox:nth-of-type(3) { --delay: -4s; --deg: -15deg; }
- .mybox:nth-of-type(4) { --delay: -6s; --deg: -15deg; }
- @keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
- @keyframes up { to { transform: rotate(var(--deg)) translateY(-740px); } }
- @keyframes cover1 { from { width: 0; } to { width: 100%; } }
- @keyframes cover2 { from { width: 0; } to { width: 100%; } }
- </style>
- <div id="mydiv">
- <span class="mybox">🎈</span>
- <span class="mybox">🎈</span>
- <span class="mybox">🎈</span>
- <span class="mybox">🎈</span>
- <pinpu-wrapper></pinpu-wrapper>
- <div id="lrc "data-lrc="花潮lrc在线">花潮lrc在线</div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2062884765" autoplay loop></audio>
- <script>
- ~function() {
- let pinpuNum = 60, pinpuWidth = 4, pinpuHeight = 160, mKey = 0, mFlag = true, slip = 0.2;
- let ppwrap = document.querySelector('pinpu-wrapper');
- let lrcAr = [[2,"演唱:一颗狼星_许篮心",2], [4,"烟花落尽呀",2.1],[6.09,"饮上一壶茶",4.0],[10.06,"梦里寻红妆",4.0],[14.03,"舞一袖月纱",3.0],[25.09,"一眼 一眼 一眼 一眼入画",4.0],[29.06,"一念 一念 一念 一念情姹",3.0],[32.09,"风声 雨声 心声 声声入耳",4.0],[36.05,"谁轻吟葬花",3.0],[40.01,"数着 一片一片一片 春花落",3.0],[43.02,"任雨 一滴一滴一滴 打青蓑",4.0],[47,"过尽万家灯火",2.1],[49.08,"随夜摇摇晃晃 醉漂泊",4.0],[54.08,"烟花落尽呀",3.0],[57.1,"饮上一壶茶",4.0],[61.09,"梦里寻红妆",4.0],[65.05,"舞一袖月纱",3.0],[69.02,"烟花落尽呀",3.0],[72.05,"独饮一杯茶",4.0],[76.01,"梦中拾落花",3.1],[79.09,"种在谁心崖",4.0],[98.02,"一眼 一眼 一眼 一眼入画",3.1],[101.09,"一念 一念 一念 一念情姹",4.0],[105.05,"风声 雨声 心声 声声入耳",4.0],[109.01,"谁轻吟葬花",3.0],[112.06,"数着 一片一片一片 春花落",3.0],[115.08,"任雨 一滴一滴一滴 打青蓑",4.0],[119.06,"过尽万家灯火",3.0],[122.03,"随夜摇摇晃晃 醉漂泊",3.0],[126.1,"烟花落尽呀",4.0],[130.09,"饮上一壶茶",3.9],[134.03,"梦里寻红妆",3.1],[137.09,"舞一袖月纱",3.9],[141.09,"烟花落尽呀",3.9],[145.03,"独饮一杯茶",3.1],[148.08,"梦中拾落花",4.0],[152.04,"种在谁心崖",4.0],[158.02,"感谢欣赏",6.0],];
- let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (mydiv.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 msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
- ~function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)[key]}px;--du: ${Math.random() * .3 + .3}s;--delay: -${Math.random()}s;`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('seeked', calcKey, false);
- aud.addEventListener('timeupdate', () => {
- for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr[j][0] + slip) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
- ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
- }();
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
上来取代码~~~~哈哈 |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|