迷宫Live版（测试帖）
<style>@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#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; }
#player { --size: 60px; left: 48%; bottom: 20px; }
.vid { height: calc(100% + 60px); mix-blend-mode: overlay; }
</style>
<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>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `陶喆&单依纯 - 迷宫Live版\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突然的问候奇怪的冷漠\n若即若离让我无法忍受\n别拆穿了惯用的借口\n是暧昧或冲动`;
</script>
本帖最后由 马黑黑 于 2024-6-22 10:10 编辑
帖子代码<style>
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#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; }
#player { --size: 60px; left: 48%; bottom: 20px; }
.vid { height: calc(100% + 60px); mix-blend-mode: overlay; }
</style>
<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>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `陶喆&单依纯 - 迷宫Live版\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突然的问候奇怪的冷漠\n若即若离让我无法忍受\n别拆穿了惯用的借口\n是暧昧或冲动`;
</script>
本帖最后由 马黑黑 于 2024-6-22 10:08 编辑
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 都需要，二者名称相同。
本帖最后由 马黑黑 于 2024-6-22 10:29 编辑
以下是最简单的引用 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都封装打包的节奏么。。{:4_199:} 视频烘托下背景画面相当震撼，
有末日之战中不屈的倔强感。。
歌词色彩和背景搭得沉稳大气，渐变中的一抹青色提亮，很是漂亮{:4_199:}
马黑黑 发表于 2024-6-22 09:42
yslrc.css 主要对标使用原生lrc歌词简单封装脚本，意在进一步简化CSS代码。说明如下：
一、导入CSS样式 ...
谢谢老师的详细讲解！ 欣赏学习老师的精彩制作！{:4_187:} 南无月 发表于 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
欣赏学习老师的精彩制作！
{:4_190:} 马黑黑 发表于 2024-6-22 09:42
yslrc.css 主要对标使用原生lrc歌词简单封装脚本，意在进一步简化CSS代码。说明如下：
一、导入CSS样式 ...
就在等说明，我来仔细看看。。{:4_187:}
--ox :81px;如果需要偏移的话就添上。。 马黑黑 发表于 2024-6-22 09:44
以下是最简单的引用 yslrc.css 方法：
这个极简封装真是太好了。
如果自己想要大点的贴子，可以直接添加
width: 1700px; height: 900px;自然就变大了{:4_199:} 马黑黑 发表于 2024-6-22 10:30
这里用的是径向渐变，就是圆形渐变
跟昨天的锥形又不同，这些天歌词渐变也展示了好几种{:4_190:} 马黑黑 发表于 2024-6-22 10:29
是的吧
头一次看到，很是稀奇。。{:4_199:}原来可以这么整 南无月 发表于 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
跟昨天的锥形又不同，这些天歌词渐变也展示了好几种
还可以用图片