Lolo Zouaï - High highs to low lows - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2022-10-28 07:09

Lolo Zouaï - High highs to low lows

马黑黑 发表于 2022-10-28 07:09

歌词大意

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

马黑黑 发表于 2022-10-28 07:13

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

马黑黑 发表于 2022-10-28 07:28

本帖最后由马黑黑于 2022-10-28 07:30 编辑

本帖，按钮用了小手链，就是过去做的的缩小版。先把 #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)}`

马黑黑 发表于 2022-10-28 07:35

那几个上下跳动的毛毛球，象征情绪的起落。需要一张图片，用 #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

{:5_116:}{:5_116:} 作品漂亮 {:4_199:}

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

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

早啊

风中飞尘 发表于 2022-10-28 07:38

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

你也早啊哈哈哈{:4_196:}

马黑黑 发表于 2022-10-28 07:44

全帖代码
<style>
#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; }
#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; }
#mplayer { position: absolute; bottom: 10px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
#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; }
#prog { --ww: 0px; width: 200px; height: 12px; border-radius: 6px; background: snow; opacity: .65; cursor: pointer; position: relative; }
#prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, red, blue); opacity: .65; }
#audtime { font: normal 14px sans-serif; color: snow; }
#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)); }
#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); }
@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="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="mplayer">
<div id="btnplay"><span></span></div>
<span id="prog"></span>
<span id="audtime">00:00 | 00:00</span>
</div>
</div>

<script>
(function() {
let aud = new Audio(), mKey = 0, mFlag = true, down = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=518092465.mp3';
aud.loop = true;
aud.autoplay = true;
if(aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('pause', () =>mState());
aud.addEventListener('play', () =>mState());
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) {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 ? (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'));
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;};
(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);});})();
})();
</script>

马黑黑 发表于 2022-10-28 07:44

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

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

上海朝阳 发表于 2022-10-28 08:32

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

樵歌发表于 2022-10-28 11:06

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

醉美水芙蓉 发表于 2022-10-28 11:44

马黑黑 发表于 2022-10-28 11:53

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

{:4_191:}

马黑黑 发表于 2022-10-28 12:00

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

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

马黑黑 发表于 2022-10-28 12:00

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

感谢支持

大猫咪 发表于 2022-10-28 14:46

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

{:4_191:}{:4_204:}{:4_179:}

相约爱晚亭 发表于 2022-10-28 15:35

欣赏音画佳作！

红影发表于 2022-10-28 16:17

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

红影发表于 2022-10-28 16:23

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

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

页: [1] 2 3 4

花潮论坛's Archiver

Lolo Zouaï - High highs to low lows