使用独立版LRC歌词同步模块发帖如何实现竖排效果
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>一些场合需要竖排歌词，但独立版歌词同步ES模块（*_only）并没有提供此类功能，如果既想使用模块的便利、又想实现竖排歌词，可以自己动手，只需在CSS上做一些改造即可。看看如何做：</p>
<div class="codebox" data-title="改造CSS代码：">
<style>
<txt-green>/* ... 这里是帖子其它CSS代码 */</txt-green>
<txt-green>/* 下面重新改写 #lrc 选择器及其伪元素 ::before 的关键样式 */</txt-green>
#lrc {
left: 40px; <txt-green>/* 定位 */</txt-green>
top: 40px; <txt-green>/* 定位 */</txt-green>
color: pink; <txt-green>/* 前景色 */</txt-green>
letter-spacing: <txt-green>4px; /* 字间距 */</txt-green>
writing-mode: vertical-lr; <txt-green>/* 竖屏设置 ：-lr 或 -rl 根据需要选择 */</txt-green>
}
<txt-green>/* 同步色设置 */</txt-green>
#lrc::before {
width: 100%; <txt-green>/* 宽度和父元素一样 */</txt-green>
height: 0; <txt-green>/* 高度开始时为 0 */</txt-green>
background: red; <txt-green>/* 同步颜色 ：支持颜色、渐变、图片 */</txt-green>
background-clip: text; <txt-green>/* 重设背景剪裁风格（重要） */</txt-green>
}
<txt-green>/* 重新关键帧动画代码（核心：动画名称与模块的同名，改 width 为 height）*/</txt-green>
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
</div>
<p>就酱，歌词同步的竖排效果就出来了。下面给一个简单但完整的改造应用实例：</p>
<div class="codebox" data-prev="1">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>雨巷</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; --bg: #eee url('https://ts4.tc.mm.bing.net/th/id/OIP-C.0lDFgp87wxVPxx3uJ_NrWAHaFj?r=0&rs=1&pid=ImgDetMain&o=7&rm=3') no-repeat center/100% 100%; --ma-size: 15%; }
#ma { left: 30px; top: 30px; }
#btnFs { left: 30px; bottom: 30px; color: #eee; }
#lrc { right: 40px; top: 40px; color: gray; letter-spacing: 4px; writing-mode: vertical-rl; }
#lrc::before { width: 100%; height: 0; background: red; background-clip: text; }
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=212524" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
<img id="ma" class="hue-rotate" src="https://638183.freep.cn/638183/small/yzvisj.png" alt="" />
</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>
</body>
</html>
</div>
<p><txt-red>【注意】在论坛发布帖子，以上代码 1~7行、35~36行要删掉！</txt-red>这些代码是一个Web页应有的，实现本文的预览需求功它们有必须存在。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 黑黑老师，第一个预览我点不动？第二个预览能看到一幅完整的音画。 这个歌词同步的竖排效果非常漂亮。老师辛苦了！{:4_187:} 梦江南 发表于 2025-8-22 12:36
黑黑老师，第一个预览我点不动？第二个预览能看到一幅完整的音画。
第一个没有开放预览。鼠标移上去，会有提示，是关闭还是可以预览 竖版歌词模板来了，这个可以适合不同风格的贴子了。。。特别是古风。。
{:4_199:} 原来不仅仅是单纯把歌词方向改为竖版即可，
歌词选择器和伪元素要重新设置，保证竖版完美运 行。。
歌词走向width改 height由0到100，配套需同时更改。。 我整了个竖版贴子，啥也没改，只换了歌词，它居然不显示漂亮的图片了
正在努力纠结中{:4_173:} 梦江南 发表于 2025-8-22 12:37
这个歌词同步的竖排效果非常漂亮。老师辛苦了！
{:4_191:} 花飞飞 发表于 2025-8-22 13:47
竖版歌词模板来了，这个可以适合不同风格的贴子了。。。特别是古风。。
{:4_190:} 花飞飞 发表于 2025-8-22 19:39
我整了个竖版贴子，啥也没改，只换了歌词，它居然不显示漂亮的图片了
正在努力纠结中
{:4_203:} 马黑黑 发表于 2025-8-22 19:55
可能是预览的问题，我把你的黑光原代码也在编辑器里预览一下，歌词背景图片也没出现，且从左往右运行。。
我再改个小播等会发到网站试试看看。。 花飞飞 发表于 2025-8-22 19:57
可能是预览的问题，我把你的黑光原代码也在编辑器里预览一下，歌词背景图片也没出现，且从左往右运行。。 ...
多多尝试。不行存为本地 .html 文档双击运行 好像删掉1~7行、35~36行，就变成从右到左的高亮，不是从上到下的。我前面那个想做竖排的就出现这样的情况，该改的我都改过的呢，这个里面的去掉这些也出同样问题了。 奇怪了，拿到pencil里去试，加上拿几行就是对的。然后拿那个实例何西-黑光去试又不能正常演示了{:4_201:} 不能从上到下正常高亮时，设置的颜色也不相识，如这里的红色和实例里的图图，都出不来。 红影 发表于 2025-8-22 20:02
好像删掉1~7行、35~36行，就变成从右到左的高亮，不是从上到下的。我前面那个想做竖排的就出现这样的情况， ...
应该是预览机制的问题：总体上，预览需要往 body 添加CSS样式，如果种种原因没有 body 标签，那就行不通。我会慢慢解决这些机制问题。
在本地建立标准的 .html 文档，有 html、head、body 等一系列标签，就会一切正常。 马黑黑 发表于 2025-8-22 19:55
正好渴了，新鲜龙眼下来，吃了不少{:4_173:} 马黑黑 发表于 2025-8-22 19:59
多多尝试。不行存为本地 .html 文档双击运行
那就是贴子比编辑器更先进。{:4_173:}
按道理不应该啊，都是你生的娃 花飞飞 发表于 2025-8-22 21:07
那就是贴子比编辑器更先进。
按道理不应该啊，都是你生的娃
道理是酱紫：模块生成的CSS要动态加入到页面中，起初我认为加到 <body> 的下一行总可以的，谁知有些环境下没有 <body> 标签，例如弹出式预览页面，它是用 JS 内置的API生成的一个附加页面，默认是没有 <body> 标签的。预览页面环境非常之多，所以，只能该LRC歌词模块，让它变聪明一点：有 <body> 的就加到它的下方，没有就找找页面种有木有 <style> 标签，有的话就加到它前面，没有的话就加到调用模块的标签的前面，酱紫就可以保证，一是能加，而是加了后不会喧宾夺主，后设置的 style 标签（比如帖子需要的CSS代码）能生效。 花飞飞 发表于 2025-8-22 21:06
正好渴了，新鲜龙眼下来，吃了不少
龙眼不错，就是太甜，没有荔枝酸酸甜甜的美。杨贵妃爱吃荔枝就因为这个味道。