福宝 发表于 2024-6-21 17:01

《万籁音》

<style>
#tz { margin: 20px auto; width: 1500px; height: 1000px;left:-230px;top:150px; background: url('https://gd-hbimg.huaban.com/9919b2948a5911c74e8c179216102decb960e1d6200023-BhFHIC_fw1200') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }

#tz::before { content: attr(data-lrc); position: absolute; top: 15px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; text-shadow: 2px 2px 2px rgba(0,0,0,.8); background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 420px; top: 500px; width: 230px; height: 230px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
#player:hover { width: 50px; }

c-c { position: absolute; width: 120%; height: 230px; border:3px solid snow;content: url('https://gd-hbimg.huaban.com/2136a30ff2d51f03bcb29932624f77616917218d47da-sHDdfg') ;border-radius: 50%; opacity: .55; }
c-c:hover{filter: hue-rotate(60deg)}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" data-lrc="万籁音">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35307327" autoplay loop></audio>
    <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total =3;
Array.from({length: total}).forEach((c,k) => {
    c = document.createElement('c-c');
    c.style.cssText += `
      transform: rotate(${360 / total * k}deg);
      border-color: #${Math.random()};
    `;
    player.appendChild(c);
});
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `万籁音`;
getAr(lrc);
</script>

福宝 发表于 2024-6-21 17:07

（凡哥代码），学习编译

浅笑 发表于 2024-6-21 17:12

美{:10_403:}

墨羽 发表于 2024-6-21 17:35

背景很玄幻。

瞳萤 发表于 2024-6-21 19:09

最近玩上代码了啊，背景很梦幻啊

福宝 发表于 2024-6-23 20:20

墨羽 发表于 2024-6-21 17:35
背景很玄幻。

谢谢大佬

福宝 发表于 2024-6-23 20:21

瞳萤 发表于 2024-6-21 19:09
最近玩上代码了啊，背景很梦幻啊

有难度{:9005:}

福宝 发表于 2024-6-23 20:22

浅笑 发表于 2024-6-21 17:12
美

谢谢姑娘，学习贴{:9005:}

墨羽 发表于 2024-6-24 08:11

福宝 发表于 2024-6-23 20:20
谢谢大佬

有几分阿凡达的生命树感觉。

福宝 发表于 2024-6-24 11:36

墨羽 发表于 2024-6-24 08:11
有几分阿凡达的生命树感觉。

大佬所言极是             魔幻{:7_283:}
页: [1]
查看完整版本: 《万籁音》