马黑黑 发表于 2024-6-18 18:19

好像失去了很多（To 小辣椒）

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/3/lose.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, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 30px; top: 30px; width: 160px; height: 160px; 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: .75; }
@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=2013420735" 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一开始就该做个路人角色\n其实早就察觉 你的态度不如从前\n早记不清 守了多少夜的空房间\n也许那天风大 吹散的人不该遇见\n也许我们 分开才是成全\n好像失去了很多 又好像没拥有过\n那些忘不掉的美好 已不属于我\n其实我舍不得 只是该放手了\n把眼泪擦干了 假装不难过\n好像失去了很多 又好像没拥有过\n那些放不下的回忆 难道是假的\n如果能重来过 别再重蹈覆辙\n一开始就该做个路人角色\n好像失去了很多 又好像没拥有过\n那些忘不掉的美好 已不属于我\n其实我舍不得 只是该放手了\n把眼泪擦干了 假装不难过\n好像失去了很多 又好像没拥有过\n那些放不下的回忆 难道是假的\n如果能重来过 别再重蹈覆辙\n一开始就该做个路人角色`;
getAr(lrc);
</script>

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

帖子代码
<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/3/lose.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, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 30px; top: 30px; width: 160px; height: 160px; 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: .75; }
@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=2013420735" 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一开始就该做个路人角色\n其实早就察觉 你的态度不如从前\n早记不清 守了多少夜的空房间\n也许那天风大 吹散的人不该遇见\n也许我们 分开才是成全\n好像失去了很多 又好像没拥有过\n那些忘不掉的美好 已不属于我\n其实我舍不得 只是该放手了\n把眼泪擦干了 假装不难过\n好像失去了很多 又好像没拥有过\n那些放不下的回忆 难道是假的\n如果能重来过 别再重蹈覆辙\n一开始就该做个路人角色\n好像失去了很多 又好像没拥有过\n那些忘不掉的美好 已不属于我\n其实我舍不得 只是该放手了\n把眼泪擦干了 假装不难过\n好像失去了很多 又好像没拥有过\n那些放不下的回忆 难道是假的\n如果能重来过 别再重蹈覆辙\n一开始就该做个路人角色`;
getAr(lrc);
</script>
帖子主要特色是：使用原生lrc歌词，无插件依赖。

马黑黑 发表于 2024-6-18 18:23

歌词除了使用 \n 隔开各句歌词，也可以分行写，一行一句歌词。更多说明请参考：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=76637&extra=page%3D1

红影 发表于 2024-6-18 19:01

哇，这个小播也是代码弄出来的，真漂亮。而且每次刷新颜色都不一样呢{:4_187:}

红影 发表于 2024-6-18 19:12

这个是原生歌词的具体实例，又可以套用了。{:4_173:}
@小辣椒 收礼开心{:4_187:}

红影 发表于 2024-6-18 19:13

如果加入视频，是不是可以加在var mState 里？

马黑黑 发表于 2024-6-18 19:30

红影 发表于 2024-6-18 19:13
如果加入视频，是不是可以加在var mState 里？

你看今天中午的介绍，有一个注释：

//其他控制代码

马黑黑 发表于 2024-6-18 19:39

红影 发表于 2024-6-18 19:01
哇，这个小播也是代码弄出来的，真漂亮。而且每次刷新颜色都不一样呢

这个是仿制你的

马黑黑 发表于 2024-6-18 19:40

红影 发表于 2024-6-18 19:12
这个是原生歌词的具体实例，又可以套用了。
@小辣椒 收礼开心

{:4_190:}

马黑黑 发表于 2024-6-18 19:40

红影 发表于 2024-6-18 19:13
如果加入视频，是不是可以加在var mState 里？

小辣椒说加了视频她不好嘚瑟

梦油 发表于 2024-6-18 20:17

图中小女孩长发飘飘的真可爱。

小辣椒 发表于 2024-6-18 21:19

红影 发表于 2024-6-18 19:12
这个是原生歌词的具体实例，又可以套用了。
@小辣椒 收礼开心

哇塞，谢谢亲爱的，看见艾特了，立马进来收礼了

小辣椒 发表于 2024-6-18 21:21

马黑黑 发表于 2024-6-18 19:40
小辣椒说加了视频她不好嘚瑟

{:4_172:}

黑黑真暖心，晓得小辣椒玩视频不能嘚瑟，居然帖子里面没有加视频，那我就可以直接套用了

小辣椒 发表于 2024-6-18 21:22

这个歌词颜色还是彩色的，小辣椒都没有看过教程，只能明天抽空去套用一个玩玩

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

谢谢黑黑的精美礼物，小辣椒开心呢{:4_205:}

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

小辣椒 发表于 2024-6-18 21:23
谢谢黑黑的精美礼物，小辣椒开心呢

这个没有视频了

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

小辣椒 发表于 2024-6-18 21:22
这个歌词颜色还是彩色的，小辣椒都没有看过教程，只能明天抽空去套用一个玩玩

貌似简单的

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

小辣椒 发表于 2024-6-18 21:21
黑黑真暖心，晓得小辣椒玩视频不能嘚瑟，居然帖子里面没有加视频，那我就可以直接套用了

{:4_173:}

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

梦油 发表于 2024-6-18 20:17
图中小女孩长发飘飘的真可爱。

晚上好

小辣椒 发表于 2024-6-18 21:29

马黑黑 发表于 2024-6-18 21:27
貌似简单的

今天上来迟了一点，看了代码这个套用可以秒做的{:4_173:}
页: [1] 2 3 4 5 6 7
查看完整版本: 好像失去了很多（To 小辣椒）