世间美好和你环环相扣

马黑黑

马黑黑

<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 = [ [0.5,"柏松 - 世间美好和你环环相扣",16.1], [16.56,"作词 : 尹初七",4.3], [20.9,"作曲 : 柏松",3.2], [24.1,"编曲 : 彭圣杰",3.9], [28.05,"偏偏秉烛夜游",3.0], [31.05,"午夜星辰 似奔走之友",3.5], [34.55,"爱你每个结痂伤口",3.0], [37.55,"酿成的陈年烈酒",3.5], [41.8,"入喉尚算可口",2.6], [44.8,"怎么泪水 还偶尔失守",3.3], [48.55,"邀你细看心中缺口",2.5], [51.05,"裂缝中留存 温柔",5.5], [57.55,"此时已莺飞草长 爱的人正在路上",4.3], [61.8,"我知他风雨兼程 途经日暮不赏",3.6], [65.55,"穿越人海 只为与你相拥",5.9], [71.55,"此刻已皓月当空 爱的人手捧星光",3.8], [75.3,"我知他乘风破浪 去了黑暗一趟",3.8], [79.05,"感同身受 给你救赎热望",6.2], [86.05,"知道你不能 还要你感受",3.8], [89.8,"让星光加了一点彩虹",3.0], [92.8,"让樱花偷偷 吻你额头",3.8], [96.55,"让世间美好 与你环环相扣",4.8], [102.05,"此时已莺飞草长 爱的人正在路上",4.3], [106.3,"我知他风雨兼程 途经日暮不赏",3.6], [110.3,"穿越人海 只为与你相拥",5.5], [115.8,"此刻已皓月当空 爱的人手捧星光",4.0], [119.8,"我知他乘风破浪 去了黑暗一趟",3.9], [124.05,"感同身受 给你救赎热望",5.5], [129.55,"此时已莺飞草长 爱的人正在路上",4.0], [133.55,"我知他风雨兼程 途经日暮不赏",3.8], [137.8,"穿越人海 只为与你相拥",5.5], [143.3,"此刻已皓月当空 爱的人手捧星光",4.3], [147.55,"我知他乘风破浪 去了黑暗一趟",3.6], [151.55,"感同身受 给你救赎热望",5.5], [158.3,"知道你不能 还要你感受",3.0], [161.3,"让星光加了一点彩虹",3.5], [164.8,"当樱花开的纷纷扬扬",3.5], [168.3,"当世间美好 与你环环相扣",7.0], [178.3,"--End--",6] ]; FS(pa, ma); lrc(pa, geci); </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歌词同步，看代码，果然如此

红影

#pa::before还加了个旋转图片，还挺漂亮。
这个播放器直接用了图图，就不用麻烦son 们了

杨帆

大家风范！谢谢马老师经典讲授与精彩示范

花飞飞

马黑黑 发表于 2025-8-13 12:34
花潮格式的LRC歌词制作工具：

      http://mhh.52qingyin.cn/api/pencilcode/lrc2ar.htm

这个用得多，太熟悉了。。
昨天下午就说花潮版的也出来了，正期待呢。。
其实原生的有些也要做，还是花潮版更精准一些。。

花飞飞

爆炸云还会动，开头以为是视频效果，又看到粒子飞出视频，感觉不对。。
原来是大背景摇摆10度形成的奇妙景观。。。
这跟粒子海浪一样波动飞舞合在一起效果真是炸裂。。

花飞飞

小播还以为是画出来的，毕竟比这个复杂几倍的都在画，哈哈。。
原来是张图片，鼠标触碰后光影增强，立体感更强一些。
经过上一贴的折腾，小播变色算是整明白了。。

花飞飞

代码封装之后，带歌词的居然也这么一丢丢。。简洁不简单，小钢炮式的。。

歌词手机看很漂亮的，与平时用的不同。。。现在电脑看又恢复原来的了。。。
现在想想，应该是显示的是手机默认字体，而那个方正准圆是我自己给手机重设的。。难怪怎么看怎么顺眼

马黑黑

花飞飞 发表于 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
大家风范！谢谢马老师经典讲授与精彩示范

花飞飞

马黑黑 发表于 2025-8-13 18:27
字体咋样没关系，主要是渐变的方式更换了，和过去的是不一样的

看到了径向渐变，用小麦色和透明构成一圈 一圈的。。
最特别的是，它会根据歌词进度变换形状，很漂亮。。

马黑黑

花飞飞 发表于 2025-8-13 20:42
看到了径向渐变，用小麦色和透明构成一圈 一圈的。。
最特别的是，它会根据歌词进度变换形状，很漂亮。 ...

原理是色标终止处的百分比，用px的话就不会有这种变化