Lolo Zouaï - High highs to low lows

马黑黑

花潮lrc在线

00:00 | 00:00

马黑黑

歌词大意

/*
总是起起落落
总是起起落落
从高处坠落
是的
从高处坠落
我从高处坠落（起起落落）
从高处坠落（起起落落）
是的 是的
我不能违背我的心说我很好，我很好（是的 是的 我很好）
我迫不及待想拿到的，并不是最低的工资（是的 是的 我知道）
是的
假的金子在我的箍上，真的在我的裤子里
他们都认为是Gucci，其实也就是99美分
我发誓
是的 是的
我发誓
哦你能帮我
哦你想带我去洛杉矶
你想卖给我梦想
我咬了一口金盘子，一个金盘子
我从高处落入了低谷
高处坠入
我从高处坠落（起起落落）
高处坠落（起起落落）
我想要真正的钻石，但却找不到
我找到了时机，他却说不是时候
说谎，我只能从你那里得到沉默
我脖子上没有金子
我的支票上没有0
我发誓，我发誓
哦你想帮我
哦你想带我去洛杉矶
你想卖给我梦想
我咬了一口金盘子，一个金盘子
我从高处坠落
高处坠落
我从高处坠落（起起落落）
高处坠落（起起落落）
我这几天感觉很差
梦想来了又走，而我还在原地
我很难表达自己，但我试着表达自己
当我坠落的时候只有我一个人
你去哪里了？没有你的音讯
我的心很痛，很痛
救我，现在你就救我
救我，现在你就救我
我从高处坠落
高处坠落
我从高处坠落（起起落落）
高处坠落（起起落落）
你知道的，生活总是大起大落
但没有底线，极限就没有意义
*/

马黑黑

想想《嘉莉妹妹》，或许可以理解这支歌曲所表达的情绪。理想与现实，就是如此，用当下的话说，就是丰满与骨感的关系。

马黑黑

本帖，按钮用了小手链，就是过去做的的缩小版。先把 #btnplay 改造一下：

#btnplay {
        width: 45px;
        height: 45px;
        cursor: pointer;
        display: grid;
        place-items: center;
        animation: rot linear 3s infinite;
        position: relative;
}

网格布局的作用在于：令其下子元素绝对居中，以便设置小珠子绕圈圈排排坐时更简单。

然后，设置一下珠子的默认样式：

#btnplay > span {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: gray;
}


在HTML里，放一颗珠子，它是灰色的，在手链的正中央：

<div id="btnplay"><span></span></div>

剩下的随机获得颜色的珠子，用JS生成，这里，我用一个立即执行函数生成珠子：

(function mkSpan() {
        [...Array(10).keys()].forEach((ele,key) => {
                //ele转成待添加的元素 span
                ele = document.createElement('span');
                //设置元素的样式并追加到原有样式描述中
                ele.style.cssText += `
                        background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});
                        transform: rotate(${key*36}deg) translate(18px)
                `;
                btnplay.appendChild(ele);}); //btnplay元素追加子元素
})();


其中的 #${Math.random().toString(16).substr(-6)} 就是获得16进制随机颜色的语句，这种表达法要写在 `` 间(上面，``包裹了整个表达式)：

`#${Math.random().toString(16).substr(-6)}`

马黑黑

那几个上下跳动的毛毛球，象征情绪的起落。需要一张图片，用 #papa 盒子的两个伪元素做成：

#papa::before {
        position: absolute;
        content: url('https://638183.freep.cn/638183/t22/gif/127.gif');
        transform: translate(0,-100px);
        mix-blend-mode: screen;
}
#papa::after {
        position: absolute;
        content: url('https://638183.freep.cn/638183/t22/gif/127.gif');
        transform: translate(0,100px);
        mix-blend-mode: screen;
}

伪元素的 content 属性，可以用 url('图片地址') 放图片，伪元素的尺寸，如果不做设置，则以图片大小为自己的尺寸：

content: url('https://638183.freep.cn/638183/t22/gif/127.gif');

风中飞尘

作品漂亮

马黑黑

风中飞尘 发表于 2022-10-28 07:35
作品漂亮

早啊

风中飞尘

马黑黑 发表于 2022-10-28 07:36
早啊

你也早啊  哈哈哈

马黑黑

全帖代码

1. <style>
   
2. #papa { margin: auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t22/webp/high.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25; }
   
3. #papa::before { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/127.gif'); transform: translate(0,-100px); mix-blend-mode: screen; }
   
4. #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/127.gif'); transform: translate(0,100px); mix-blend-mode: screen; }
   
5. #mplayer { position: absolute; bottom: 10px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
   
6. #btnplay { width: 45px; height: 45px; cursor: pointer; display: grid; place-items: center; animation: rot linear 3s infinite; position: relative; }
   
7. #btnplay > span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: gray; }
   
8. #prog { --ww: 0px; width: 200px; height: 12px; border-radius: 6px; background: snow; opacity: .65; cursor: pointer; position: relative; }
   
9. #prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, red, blue); opacity: .65; }
   
10. #audtime { font: normal 14px sans-serif; color: snow; }
    
11. #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 20px; font: bold 2em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); }
    
12. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,5%,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); }
    
13. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
14. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
15. @keyframes rot { to { transform: rotate(1turn); } }
    
16. </style>
    
17. 
    
18. <div id="papa">
    
19.         <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
    
20.         <div id="mplayer">
    
21.                 <div id="btnplay"><span></span></div>
    
22.                 <span id="prog"></span>
    
23.                 <span id="audtime">00:00 | 00:00</span>
    
24.         </div>
    
25. </div>
    
26. 
    
27. <script>
    
28. (function() {
    
29.         let aud = new Audio(), mKey = 0, mFlag = true, down = true;
    
30.         let lrcAr = [[1,"Lyrics by：Lolo Zoua&#239;/Stelios Phili",1.0],[2,"Composed by：Lolo Zoua&#239;/Stelios Phili",2.0],[4,"Des hauts et des bas",2.0],[10,"Des hauts et des bas",2.0],[12,"High highs to low lows",3.7],[16,"Yeah",0.8],[17,"High highs to low lows",5.2],[23,"I go from high highs to low lows",4.5],[28,"Des hauts et des bas",1.0],[29,"High highs to low lows",5.0],[34,"Des hauts et des bas",1.0],[35,"Yeah yeah",0.0],[35,"I can't say I've been doing okay I've been doing okay",4.5],[40,"Ouais ouais ok",1.0],[41,"And I can't wait to really get paid not just minimum wage",4.6],[46,"Ouais ouais je sais",1.0],[47,"Yeah",0.0],[47,"Fake gold on my hoops real rips on my pants",3.0],[50,"They think it's all gucci but it's 99 cents",3.0],[53,"I swear",2.0],[55,"Yeah yeah",1.0],[56,"I swear",2.0],[59,"Ooh you wanna help me",2.2],[62,"Ooh you wanna fly me out to LA",2.4],[65,"Dreams you wanna sell me",2.1],[68,"I took a bite that's a gold plate a gold plate",2.6],[71,"I go from high highs to low lows",4.6],[77,"High highs to low lows",5.0],[83,"I go from high highs to low lows",4.5],[88,"Des hauts et des bas",2.0],[90,"High highs to low lows",4.0],[94,"Des hauts et des bas",1.0],[95,"Real diamonds I want 'em but I can't find them",4.0],[99,"Timing he said it's just bad timing",3.0],[102,"Lying all I got from you was silence",4.2],[107,"No gold on my neck",2.6],[110,"No O's on my check",2.6],[113,"I swear I swear",5.6],[119,"Ooh you wanna help me",2.2],[122,"Ooh you wanna fly me out to LA",2.4],[125,"Dreams you wanna sell me",2.1],[128,"I took a bite that's a gold plate a gold plate",3.0],[131,"I go from high highs to low lows",4.6],[138,"High highs to low lows",4.5],[143,"I go from high highs to low lows",5.0],[148,"Des hauts et des bas",2.0],[150,"High highs to low lows",4.0],[154,"Des hauts et des bas",2.0],[156,"I'm not okay these days",2.0],[158,"Dreams come and go I stay",3.0],[161,"J'ai du mal à m'exprimer mais j'essaye",6.0],[167,"I was alone when I fell",3.0],[170,"Where did you go",1.0],[171,"Pas de nouvelle",2.0],[173,"J'ai beaucoup de mal de coeur mal de coeur",6.5],[180,"Save me now you wanna save me",4.5],[186,"Save me now you wanna save me",4.0],[190,"I go from high highs to low lows",7.0],[197,"High highs to low lows",5.3],[203,"I go from high highs to low lows",5.0],[208,"Des hauts et des bas",1.0],[209,"High highs to low lows",5.0],[214,"Des hauts et des bas",3.0],[217,"Tu sais la vie est pleine de hauts et de bas",4.6],[222,"Mais sans les bas les hauts ne veulent rien dire",5.8]];
    
31.         aud.src = 'https://music.163.com/song/media/outer/url?id=518092465.mp3';
    
32.         aud.loop = true;
    
33.         aud.autoplay = true;
    
34.         if(aud.paused) btnplay.style.animationPlayState = 'paused';
    
35.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
37.         aud.addEventListener('seeked', () => calcKey());
    
38.         aud.addEventListener('pause', () =>mState());
    
39.         aud.addEventListener('play', () =>mState());
    
40.         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);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {cKey = j;if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
    
41.         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);};
    
42.         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;};
    
43.         let mState = () => aud.paused ? (btnplay.style.animationPlayState='paused',lrc.style.setProperty('--state', 'paused'),papa.style.setProperty('--opt','0')) : (btnplay.style.animationPlayState='running', lrc.style.setProperty('--state', 'running'),papa.style.setProperty('--opt','.25'));
    
44.         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;};
    
45.         (function mkSpan() {[...Array(10).keys()].forEach((ele,key) => {ele = document.createElement('span');ele.style.cssText += `background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)}); transform: rotate(${key*36}deg) translate(18px)`;btnplay.appendChild(ele);});})();
    
46. })();
    
47. </script>

复制代码

马黑黑

风中飞尘 发表于 2022-10-28 07:38
你也早啊  哈哈哈

赶在上班前弄一个，起早一点才行

上海朝阳

就如同在北极光里欢跃着外星虫

樵歌

很有梦幻色彩，可惜木看到你的洋妞儿的小样纸

马黑黑

醉美水芙蓉 发表于 2022-10-28 11:44
很有意思的歌曲！问候黑黑老师！

马黑黑

樵歌 发表于 2022-10-28 11:06
很有梦幻色彩，可惜木看到你的洋妞儿的小样纸

洋妞没按时做核酸，不给她露面

马黑黑

上海朝阳 发表于 2022-10-28 08:32
就如同在北极光里欢跃着外星虫

感谢支持

大猫咪

黑黑又出新代码啦，非常喜欢！ 音乐和画面融合的真棒，空了学习，问好！

相约爱晚亭

欣赏音画佳作！

红影

手链的播放器漂亮，那些毛毛球也很有趣。欣赏黑黑漂亮的制作

红影

马黑黑 发表于 2022-10-28 07:44
赶在上班前弄一个，起早一点才行

这么早的帖子，那是要起多早才弄得出啊。黑黑厉害