世间美好和你环环相扣
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #000; no-repeat center/cover; --ma-size: 15%; }
#pa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/w5/bb.webp') no-repeat center/cover; animation: sway 4s linear infinite alternate var(--state);}
#ma { right: 30px; top: 30px; background: url('https://638183.freep.cn/638183/small/2025/ring.webp') no-repeat center/cover; }
#lrc { bottom: 20px; }
#btnFs { left: 30px; top: 30px; color: #fff; }
@keyframes sway { to { transform: rotate(10deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1363948882" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/49/58/video63635686b7b48.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
FS(pa, ma);
lrc(pa, geci);
</script> <div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #000; no-repeat center/cover; --ma-size: 15%; }
#pa::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/w5/bb.webp') no-repeat center/cover; animation: sway 4s linear infinite alternate var(--state);}
#ma { right: 30px; top: 30px; background: url('https://638183.freep.cn/638183/small/2025/ring.webp') no-repeat center/cover; }
#lrc { bottom: 20px; }
#btnFs { left: 30px; top: 30px; color: #fff; }
@keyframes sway { to { transform: rotate(10deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1363948882" autoplay loop></audio>
<video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/49/58/video63635686b7b48.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
FS(pa, ma);
lrc(pa, geci);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> hclrc_only 模块，顾名思义，花朝格式LRC歌词同步独立版，地址：
’https://638183.freep.cn/638183/web/lrc/hclrc_only.js‘
如有需要，可下载或复制模块代码为己用，可任意修改，无需声明模块来源。
模块提供的函数仅两个参数：帖子容器、花朝格式LRC歌词数组。
一楼的LRC歌词同步采用模块默认的配置。可以自行设置歌词颜色、同步颜色：
#lrc {
left: 20px;
top: 20px;
color: #666; /* 歌词底色 */
}
#lrc::before {
backgrouind: red; /* 歌词同步颜色 */
background-clip: text; /* 重设背景剪裁 */
}
歌词同步颜色支持纯颜色、渐变背景色、图片背景。 花潮格式的LRC歌词制作工具：
http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm
支持从头制作，支持将原生歌词转换，支持微调 进来看到高亮色能正常跟着歌词长短调整了，感觉用的就是花朝格式LRC歌词同步，看代码，果然如此{:4_173:} #pa::before还加了个旋转图片，还挺漂亮。
这个播放器直接用了图图，就不用麻烦son 们了{:4_173:} 本帖最后由 杨帆 于 2025-8-13 17:10 编辑
大家风范！谢谢马老师经典讲授与精彩示范{:4_191:} 马黑黑 发表于 2025-8-13 12:34
花潮格式的LRC歌词制作工具：
http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm
这个用得多，太熟悉了。。
昨天下午就说花潮版的也出来了，正期待呢。。
其实原生的有些也要做，还是花潮版更精准一些。。{:4_173:} 爆炸云还会动，开头以为是视频效果，又看到粒子飞出视频，感觉不对。。
原来是大背景摇摆10度形成的奇妙景观。。。
这跟粒子海浪一样波动飞舞合在一起效果真是炸裂。。 小播还以为是画出来的，毕竟比这个复杂几倍的都在画，哈哈。。
原来是张图片，鼠标触碰后光影增强，立体感更强一些。
经过上一贴的折腾，小播变色算是整明白了。。{:4_170:} 代码封装之后，带歌词的居然也这么一丢丢。。简洁不简单，小钢炮式的。。
歌词手机看很漂亮的，与平时用的不同。。。现在电脑看又恢复原来的了。。。
现在想想，应该是显示的是手机默认字体，而那个方正准圆是我自己给手机重设的。。难怪怎么看怎么顺眼{:4_173:} 花飞飞 发表于 2025-8-13 17:53
代码封装之后，带歌词的居然也这么一丢丢。。简洁不简单，小钢炮式的。。
歌词手机看很漂亮的，与平时用 ...
字体咋样没关系，主要是渐变的方式更换了，和过去的是不一样的 花飞飞 发表于 2025-8-13 17:50
小播还以为是画出来的，毕竟比这个复杂几倍的都在画，哈哈。。
原来是张图片，鼠标触碰后光影增强，立体感 ...
用合适的图片做小播省事，希望学PS的人能贡献出更多小播图样来 花飞飞 发表于 2025-8-13 17:48
爆炸云还会动，开头以为是视频效果，又看到粒子飞出视频，感觉不对。。
原来是大背景摇摆10度形成的奇妙景 ...
合适的背景图可以借助伪元素达成此类效果 花飞飞 发表于 2025-8-13 17:42
这个用得多，太熟悉了。。
昨天下午就说花潮版的也出来了，正期待呢。。
其实原生的有些也要做，还是花 ...
原生的歌词制作简单 红影 发表于 2025-8-13 13:55
进来看到高亮色能正常跟着歌词长短调整了，感觉用的就是花朝格式LRC歌词同步，看代码，果然如此
熟悉吧？ 红影 发表于 2025-8-13 14:01
#pa::before还加了个旋转图片，还挺漂亮。
这个播放器直接用了图图，就不用麻烦son 们了
不过现在zf鼓励多生 杨帆 发表于 2025-8-13 17:03
大家风范！谢谢马老师经典讲授与精彩示范
{:4_190:} 马黑黑 发表于 2025-8-13 18:27
字体咋样没关系，主要是渐变的方式更换了，和过去的是不一样的
看到了径向渐变，用小麦色和透明构成一圈 一圈的。。
最特别的是，它会根据歌词进度变换形状，很漂亮。。{:4_199:} 花飞飞 发表于 2025-8-13 20:42
看到了径向渐变，用小麦色和透明构成一圈 一圈的。。
最特别的是，它会根据歌词进度变换形状，很漂亮。 ...
原理是色标终止处的百分比，用px的话就不会有这种变化