论坛 › 音乐沙龙 › 天空

绿叶清舟 发表于 2024-6-20 21:09

天空

<style>
#tz { margin: 30px 0 30px calc(50% - 723px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/66741fc7d9c307b7e915c3a9.jpg') 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, #54535b, snow, #54535b, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 30px; top: 30px; width: 100px; height: 100px; 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: 200px; }
c-c { position: absolute; width: 85%; height: 30px; border: 12px double plum; border-radius: 50%; opacity: .5; }
@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=1828769094" autoplay loop></audio>
      <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 8;
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().toString(16).substring(2,8)};
      `;
      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 = `我的天空 为何挂满湿的泪\n我们天空 为何总 灰的脸\n漂流在世界的另一边\n任寂寞侵犯 一便一遍\n天空挂着长长的思念\n你的天空可有悬着灰的脸\n你的天空 可会有 蓝的月\n放逐在世界的另一边\n任寂寞占据 一夜一夜\n天空 藏着深深的思念\n我们天空何时才能成一片\n我们天空何时能相连\n等待在世界的各一边\n任寂寞嘻笑一年一年\n天空叠着层层的思念\n但愿天空不再挂满湿的泪\n但愿天空不再涂上灰的脸`;
getAr(lrc);
</script>

梦油 发表于 2024-6-20 21:29

欣赏佳作，问候清舟。

红影 发表于 2024-6-20 22:08

这歌儿好听，清舟的制作意境悠远，歌词的颜色也调得很奇特，很赞{:4_199:}

马黑黑 发表于 2024-6-20 22:37

{:4_199:}

绿叶清舟 发表于 2024-6-21 20:28

梦油 发表于 2024-6-20 21:29
欣赏佳作，问候清舟。

谢谢梦油，晚上好

绿叶清舟 发表于 2024-6-21 20:29

红影 发表于 2024-6-20 22:08
这歌儿好听，清舟的制作意境悠远，歌词的颜色也调得很奇特，很赞

谢谢影，终于有歌词了{:4_189:}

绿叶清舟 发表于 2024-6-21 20:29

马黑黑 发表于 2024-6-20 22:37


播放器颜色是随机的吧

南无月 发表于 2024-6-21 20:42

最新效果的小播加歌词，歌曲好听，画面悠远~~{:4_187:}

绿叶清舟 发表于 2024-6-21 20:52

南无月 发表于 2024-6-21 20:42
最新效果的小播加歌词，歌曲好听，画面悠远~~

一直没做歌词的，终于整了一个

梦油 发表于 2024-6-21 21:17

绿叶清舟 发表于 2024-6-21 20:28
谢谢梦油，晚上好

清舟朋友不客气。

马黑黑 发表于 2024-6-21 21:21

绿叶清舟 发表于 2024-6-21 20:29
播放器颜色是随机的吧

好像是跟天空的颜色吧

小辣椒 发表于 2024-6-21 23:02

清舟这个图意又是特别的棒，天空就是天空，就连美女也是仰视着天空{:4_199:}

小辣椒 发表于 2024-6-21 23:03

这首网易的音乐，音质不错的，好听{:4_199:}

小辣椒 发表于 2024-6-21 23:04

欣赏清舟的精彩制作{:4_199:}

樵歌 发表于 2024-6-22 21:19

把天空的意境表现得很天空。那仙女也很耽醉的样纸{:4_173:}到底是音画更有艺术性！

红影 发表于 2024-6-22 23:01

绿叶清舟 发表于 2024-6-21 20:29
谢谢影，终于有歌词了

是啊，而且设置得很漂亮呢{:4_187:}

绿叶清舟 发表于 2024-6-24 20:50

马黑黑 发表于 2024-6-21 21:21
好像是跟天空的颜色吧

好象没次进来都是不同的了

绿叶清舟 发表于 2024-6-24 20:51

小辣椒 发表于 2024-6-21 23:02
清舟这个图意又是特别的棒，天空就是天空，就连美女也是仰视着天空

谢谢辣椒晚上好啊

绿叶清舟 发表于 2024-6-24 20:51

小辣椒 发表于 2024-6-21 23:03
这首网易的音乐，音质不错的，好听

是啊，难得现在网易难得有好音质的了

绿叶清舟 发表于 2024-6-24 20:52

红影 发表于 2024-6-22 23:01
是啊，而且设置得很漂亮呢

就在图上取了个颜色了

查看完整版本: 天空