一些场合需要竖排歌词，但独立版歌词同步ES模块（*_only）并没有提供此类功能，如果既想使用模块的便利、又想实现竖排歌词，可以自己动手，只需在CSS上做一些改造即可。看看如何做：
<style>
/* ... 这里是帖子其它CSS代码 */
/* 下面重新改写 #lrc 选择器及其伪元素 ::before 的关键样式 */
#lrc {
left: 40px; /* 定位 */
top: 40px; /* 定位 */
color: pink; /* 前景色 */
letter-spacing: 4px; /* 字间距 */
writing-mode: vertical-lr; /* 竖屏设置 ：-lr 或 -rl 根据需要选择 */
}
/* 同步色设置 */
#lrc::before {
width: 100%; /* 宽度和父元素一样 */
height: 0; /* 高度开始时为 0 */
background: red; /* 同步颜色 ：支持颜色、渐变、图片 */
background-clip: text; /* 重设背景剪裁风格（重要） */
}
/* 重新关键帧动画代码（核心：动画名称与模块的同名，改 width 为 height） */
@keyframes cover1 { from { height: 0; } to { height: 100%; } }
@keyframes cover2 { from { height: 0; } to { height: 100%; } }
</style>
就酱，歌词同步的竖排效果就出来了。下面给一个简单但完整的改造应用实例：
<!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 = [ [2,"陈瑞 - 雨巷",4], [8,'诗 ：戴望舒',6], [35.01,"撑着油纸伞",2.4], [38.31,"独自",1.9], [42.64,"彷徨在悠长 悠长",5.1], [49.9,"又寂寥的雨巷 我希望逢着",6.3], [57.11,"一个丁香一样地结着",3.1], [60.17,"愁怨的姑娘 撑着油纸伞",7.2], [68.36,"独自",2.0], [72.68,"彷徨在悠长 悠长",5.1], [79.94,"又寂寥的雨巷 我希望逢着",6.4], [87.23,"一个丁香一样地结着",2.8], [90.14,"愁怨的姑娘",3.2], [94.32,"她是有 丁香一样的颜色",5.4], [101.03,"丁香一样的芬芳 丁香一样的忧愁",6.5], [108.93,"在雨中哀怨 哀怨又彷徨",6.4], [116.95,"她彷徨在这寂寥的雨巷",6.5], [154.9,"撑着油纸伞",2.2], [158.37,"独自",1.8], [162.6,"彷徨在悠长 悠长",5.2], [169.45,"又寂寥的雨巷 我希望逢着",6.9], [177.04,"一个丁香一样地结着",3.0], [180.11,"愁怨的姑娘",3.0], [184.26,"她是有 丁香一样的颜色",5.8], [191.16,"丁香一样的芬芳 丁香一样的忧愁",7.2], [198.9,"在雨中哀怨 哀怨又彷徨",6.5], [206.94,"她彷徨在这寂寥的雨巷",6.2], [214.11,"她是有 丁香一样的颜色",5.8], [221.05,"丁香一样的芬芳 丁香一样的忧愁",7.0], [228.8,"在雨中哀怨 哀怨又彷徨",6.8], [236.59,"她彷徨在这寂寥的雨巷",7.7] ];
FS(pa, ma);
lrc(pa, geci);
</script>
</body>
</html>
【注意】在论坛发布帖子，以上代码 1~7行、35~36行要删掉！这些代码是一个Web页应有的，实现本文的预览需求功它们有必须存在。
发表于 2025-8-22 12:32
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-8-22 12:36
楼主
