迷宫Live版（测试帖）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/yslrc.css';
   
3.         #tz { --lrc-top: 30%; --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; --lrc-shadow: #000; height: 567px; background: url('https://638183.freep.cn/638183/t24/3/migs.jpg') no-repeat center/cover; margin: 30px 0; }
   
4.         #player { --size: 60px; left: 48%; bottom: 20px; }
   
5.         .vid { height: calc(100% + 60px); mix-blend-mode: overlay; }
   
6. </style>
   
7. 
   
8. <div id="tz" class="tz" data-lrc="HUACHAO">
   
9.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2161527734" autoplay loop></audio>
   
10.         <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/89/5e6708ca0b435.mp4" autoplay loop muted></video>
    
11.         <img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
    
12. </div>
    
13. 
    
14. <script>
    
15. var sf = document.createElement('script');
    
16. sf.charset = 'utf-8';
    
17. sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
    
18. document.body.appendChild(sf);
    
19. var lrc = `[00:00:900]陶喆&单依纯 - 迷宫Live版\n[00:24.30]打不开又关不上的聊天窗口\n[00:30.18]情话说到一半那算不算拥有\n[00:35.85]谁赤裸谁放纵引蝶招蜂\n[00:41.79]别太冲动没什么结果\n[00:47.52]不远不近的距离我们并肩走\n[00:53.28]若有似无的触碰谁偷偷脸红\n[00:58.98]谁主动谁退缩谁隔岸观火\n[01:05.01]不置可否都怪我没看懂\n[01:10.35]你的眼神太闪躲心思猜不透\n[01:13.71]走不出你心里的迷宫\n[01:16.59]牵着你的手向前又退后\n[01:19.32]是我太心急还是又犯了错\n[01:24.78]别戳破了沉默的背后\n[01:29.43]是暧昧或冲动\n[01:32.37]不敢琢磨\n[01:33.99]你一举一动是否有线索\n[01:36.87]能够让我打开这枷锁\n[01:39.81]突然的问候奇怪的冷漠\n[01:42.66]若即若离让我无法忍受\n[01:48.03]别拆穿了惯用的借口\n[01:52.62]是暧昧或冲动\n[01:55.68]只要你说\n[02:08.79]不远不近的距离我们并肩走\n[02:14.58]若有似无的触碰谁偷偷脸红\n[02:20.25]谁主动谁退缩谁隔岸观火\n[02:26.28]不置可否都怪我没看懂\n[02:34.50]你的眼神太闪躲心思猜不透\n[02:37.80]走不出你心里的迷宫\n[02:40.71]牵着你的手向前又退后\n[02:43.50]是我太心急还是又犯了错\n[02:48.99]别戳破了沉默的背后\n[02:53.40]是暧昧或冲动\n[02:56.55]不敢琢磨\n[02:58.17]你一举一动是否有线索\n[03:01.08]能够让我打开这枷锁\n[03:04.08]突然的问候奇怪的冷漠\n[03:06.96]若即若离让我无法忍受\n[03:12.24]别拆穿了惯用的借口\n[03:16.89]是暧昧或冲动`;
    
20. </script>

复制代码

马黑黑

yslrc.css 主要对标使用原生lrc歌词简单封装脚本，意在进一步简化CSS代码。说明如下：

一、导入CSS样式表（代码第 02 行）；

二、#tz 选择器中，需要几个CSS变量：

    --ox : 帖子水平方向偏移系数，缺省 81px，花潮论坛不需要设置此变量；
    --lrc-top : lrc歌词UI（#tz::after伪元素）垂直方向定位；
    --lrc-bg : lrc歌词颜色设置，按元素背景图片设置方法操作，支持渐变与图片；

    同时，应使用常规CSS规范设置帖子的尺寸、背景以及自己需要的属性。width 和 height 默认是 1024*640，可重新设置。新设置的任何属性，均会覆盖 yslrc.css 的设置（如有）。

三、#player 选择器

    --size 变量是缺省值是 80px，表示播放控制器的宽高尺寸。可以是div或img标签，如果是div，设置一下背景图片，或通过JS动态生成图案。

四、.vid 选择器

    如果没有视频元素，此选择器可以删掉。有视频时，可以重新设置视频的宽和（或）高、混合样式（默认screen）。

五、HTML代码

请给帖子父元素、播放按钮的代码加入 class=“。。。”  属性，样式举例如下：

    <div id="tz" class="tz" data-lrc="HUACHAO">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2161527734" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/89/5e6708ca0b435.mp4" autoplay loop muted></video>
        <img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
    </div>


就是说，id 和 class 都需要，二者名称相同。

马黑黑

以下是最简单的引用 yslrc.css 方法：

<style>
        @import 'https://638183.freep.cn/638183/web/css/yslrc.css';
        #tz { --ox: 0px; margin: 30px 0; }
        #player { left: 48%; bottom: 20px; }


</style>


<div id="tz" class="tz" data-lrc="HUACHAO LRC PLAYER">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29999537" autoplay loop></audio>
        <img id="player" class="player" title="播放/暂停" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
</div>


主帖仅设置了偏移系数（注意必须有单位 px，即使是设置为0——因为CSS做计算时非常严谨）和外边距；播放器设置了定位属性；没有视频。可以试着将上述代码拿到 pencil code (52qingyin.cn) 运行查看效果，从效果中你会发现，其他必要的设置还是要做的，详情请查看二楼提供的代码和三楼的相关说明。

最后提醒一下：yslrc.css 不仅仅只能用于原生lrc歌词同步的帖子，它实际上可以用于别的帖子，只要喜欢。另外，这是测试的样式，还不是很理想。

南无月

https://638183.freep.cn/638183/web/css/yslrc.css
艾玛，这是CSS都封装打包的节奏么。。

南无月

视频烘托下背景画面相当震撼，
有末日之战中不屈的倔强感。。
歌词色彩和背景搭得沉稳大气，渐变中的一抹青色提亮，很是漂亮

梦江南

马黑黑 发表于 2024-6-22 09:42
yslrc.css 主要对标使用原生lrc歌词简单封装脚本，意在进一步简化CSS代码。说明如下：

一、导入CSS样式 ...

谢谢老师的详细讲解！

梦江南

欣赏学习老师的精彩制作！

马黑黑

南无月 发表于 2024-6-22 10:03
https://638183.freep.cn/638183/web/css/yslrc.css
艾玛，这是CSS都封装打包的节奏么。。

是的吧

马黑黑

梦江南 发表于 2024-6-22 10:23
欣赏学习老师的精彩制作！

上午好

马黑黑

南无月 发表于 2024-6-22 10:09
视频烘托下背景画面相当震撼，
有末日之战中不屈的倔强感。。
歌词色彩和背景搭得沉稳大气，渐变中的一抹 ...

这里用的是径向渐变，就是圆形渐变

马黑黑

梦江南 发表于 2024-6-22 10:23
欣赏学习老师的精彩制作！

南无月

马黑黑 发表于 2024-6-22 09:42
yslrc.css 主要对标使用原生lrc歌词简单封装脚本，意在进一步简化CSS代码。说明如下：

一、导入CSS样式 ...

就在等说明，我来仔细看看。。
--ox :81px;如果需要偏移的话就添上。。

南无月

马黑黑 发表于 2024-6-22 09:44
以下是最简单的引用 yslrc.css 方法：

这个极简封装真是太好了。
如果自己想要大点的贴子，可以直接添加
width: 1700px; height: 900px;自然就变大了

南无月

马黑黑 发表于 2024-6-22 10:30
这里用的是径向渐变，就是圆形渐变

跟昨天的锥形又不同，这些天歌词渐变也展示了好几种

南无月

马黑黑 发表于 2024-6-22 10:29
是的吧

头一次看到，很是稀奇。。原来可以这么整

马黑黑

南无月 发表于 2024-6-22 10:49
头一次看到，很是稀奇。。原来可以这么整

可以的

马黑黑

南无月 发表于 2024-6-22 10:42
这个极简封装真是太好了。
如果自己想要大点的贴子，可以直接添加
width: 1700px; height: 900px;自然 ...

是的。CSS，后面设置的，会覆盖前面的设置。

马黑黑

南无月 发表于 2024-6-22 10:38
就在等说明，我来仔细看看。。
--ox :81px;如果需要偏移的话就添上。。

如果不是在花潮论坛使用那么，偏移量必须添上，因为 --ox 有初始值，--ox: 81px; ，在别的地方就要改改，比如你站里：

--ox: 1px;

马黑黑

南无月 发表于 2024-6-22 10:49
跟昨天的锥形又不同，这些天歌词渐变也展示了好几种

还可以用图片