论坛 › 欢乐水吧 › 《苍天在上》- 郑钧

加林森 发表于 2022-7-29 12:40

《苍天在上》- 郑钧

<style>

.outer { position: relative; width: 571px; height: 382px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
.mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
.wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
.wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.mama meter { width: 96px; position: absolute; bottom: -4px;}
@keyframes up { from { top: -3px;} to { top: -16px; } }

</style>

<div class="outer">
      <img src="https://pic.imgdb.cn/item/62e35f1df54cd3f937d26ad4.gif">
      <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      </div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=186661.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
      ele = document.createElement('span');
      ele.className = 'sskey';
      ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
      wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
      Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
      })
      meter.value = prog(aud.duration, aud.currentTime);
})

</script>

加林森 发表于 2022-7-29 12:40

本帖最后由 加林森 于 2022-7-29 12:42 编辑

《苍天在上》- 郑钧
作词 : 郑钧
作曲 : 郑钧
乱发飞舞 腊月的寒风 野鸽子掠过青空
可怜我此生 命中已注定 不能与你同行
没有理由 没有理由 只有借口 只有借口
就剩下苍天在上 就剩下苍天在上
它竟是如此无常 它竟也如此无常
站在先人古老的原上 我哭着把你祭奠
这里断送了多少个梦想 如今都化成飞烟
没有理由 没有理由 只有借口 只有借口
就剩下苍天在上 就剩下苍天在上
她竟是如此无常 她竟也如此无常 喔……
当一场大雪悄然落下 喔……所有爱恨就此融化
是谁给我缠上了玉锁 世世都不得解脱
是谁给你套上了金甲 生生都陷于水火
没有理由 没有理由 只有借口 只有借口
就剩下苍天在上 就剩下苍天在上
她竟是如此无常 她竟也如无常
只剩下苍天在上 只剩下苍天在上
她竟也如此无常 她竟也如无常

加林森 发表于 2022-7-29 12:44

@马黑黑   好久没有制作这种播放器了，重新制作一个出来。效果还挺好的。

马黑黑 发表于 2022-7-29 12:51

队长在吼啥呀{:4_170:}

加林森 发表于 2022-7-29 13:21

马黑黑 发表于 2022-7-29 12:51
队长在吼啥呀

管他的，先吼了再说。{:4_189:}

梦油 发表于 2022-7-29 13:52

虽然会面不大，确很有新意。

加林森 发表于 2022-7-29 13:54

梦油 发表于 2022-7-29 13:52
虽然会面不大，确很有新意。

这个是压缩了的。

梦油 发表于 2022-7-29 14:17

加林森 发表于 2022-7-29 13:54
这个是压缩了的。

哦，压缩啦！

红影 发表于 2022-7-29 14:19

这个动图的底图很漂亮{:4_187:}

加林森 发表于 2022-7-29 14:22

梦油 发表于 2022-7-29 14:17
哦，压缩啦！

是的。

加林森 发表于 2022-7-29 14:24

红影 发表于 2022-7-29 14:19
这个动图的底图很漂亮

听见这首歌曲就去找图片，结果我感觉这个效果挺好的就用上了。

马黑黑 发表于 2022-7-29 18:17

加林森 发表于 2022-7-29 13:21
管他的，先吼了再说。

吼吼更快乐更健康

加林森 发表于 2022-7-29 18:34

马黑黑 发表于 2022-7-29 18:17
吼吼更快乐更健康

就是，多吼有益健康。{:4_189:}

马黑黑 发表于 2022-7-29 18:46

加林森 发表于 2022-7-29 18:34
就是，多吼有益健康。

多吼吼

加林森 发表于 2022-7-29 18:55

马黑黑 发表于 2022-7-29 18:46
多吼吼

{:4_172:}

樵歌 发表于 2022-7-29 21:21

越做越好，很魔幻{:4_199:}

加林森 发表于 2022-7-29 21:31

樵歌 发表于 2022-7-29 21:21
越做越好，很魔幻

就是玩玩。

红影 发表于 2022-7-29 23:09

加林森 发表于 2022-7-29 14:24
听见这首歌曲就去找图片，结果我感觉这个效果挺好的就用上了。

队长现在找的图图很不错呢{:4_187:}

加林森 发表于 2022-7-29 23:54

红影 发表于 2022-7-29 23:09
队长现在找的图图很不错呢

都是跟你们学习的啊。

红影 发表于 2022-7-29 23:57

加林森 发表于 2022-7-29 23:54
都是跟你们学习的啊。

找图完全是自己的功夫，这个倒是没法学的呢{:4_173:}

查看完整版本: 《苍天在上》- 郑钧