弦子 - 颓废

马黑黑 · 发表于 2025-11-6 08:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-11-6 08:04

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa {--offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/xmzi.webp') no-repeat center/cover; --ma-size: 80px; }
.lrc {top: 40px; left: 30px; color: white; writing-mode: vertical-lr; --c1: lightblue; --c2: lightblue; --rect: 0 0 100% 0; --border: 0 1px 0 0; }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
var tz = TZ.TZ('pa');
let gc = [[2,"弦子 - 颓废",14.0], [16,"出自专辑醉清风2005版",11.3], [30.88,"闭上眼",2.2], [34.44,"不看谁",2.2], [38.00,"下着雨",2.6], [41.69,"流着泪",2.2], [45.02,"让风儿吹",2.2], [49.26,"长发飞",2.2], [51.95,"让心情也",2.4], [56.00,"吸取尘灰",2.7], [60.13,"爱难退",1.4], [62.04,"心好累",1.3], [63.76,"你疲惫",1.3], [65.83,"我颓废",1.3], [67.22,"曾经以为爱很美",3.4], [70.63,"但尝试过",1.4], [72.75,"是苦滋味",2.4], [77.65,"爱谁恨谁",3.0], [81.41,"我的心无言以对",4.1], [86.11,"爱是一种无以命中的美",6.7], [93.36,"爱很颓废",2.9], [97.43,"我也有点颓废",2.4], [100.62,"不管是谁",3.0], [104.85,"我也不再爱谁",3.6], [136.22,"爱难退",0.7], [137.81,"心好累",0.8], [139.73,"你疲惫",1.0], [141.24,"我颓废",1.2], [142.95,"曾经以为爱很美",3.3], [146.49,"但尝试过",1.5], [148.63,"是苦滋味",2.4], [153.38,"爱谁恨谁",2.8], [157.18,"我的心无言以对",4.0], [161.84,"爱是一种无以命中的美",6.6], [169.08,"爱很颓废",2.8], [173.18,"我也有点颓废",2.5], [176.37,"不管是谁",3.2], [180.36,"我也不再爱谁",3.0], [185.62,"我很颓废",1.0], [187.86,"我美的有点累",2.5], [191.05,"我不再美",2.8], [195.28,"我心止如水",6.6]];
tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=30474809' });
tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/15653652/01/40/17/632c27de420c7.mp4' });
tz.add('img', 'player', 'ma', {
src: 'https://638183.freep.cn/638183/web/svg1/002.svg',
style: 'bottom: 40px; left: 185px; border-radius: 50%'
}).playmp3();
tz.lrc(gc);
tz.bgprog().style('color: lightblue; bottom: 20px; left: 100px;');
tz.fs().style('top: 20px; right: 20px');
</script>

复制代码

马黑黑 · 发表于 2025-11-6 08:27

一、tz 歌词同步指令

LRC歌词使用 tz.lrc(歌词变量名) 实现，歌词变量要事先声明，使用花潮LRC歌词格式的二维数组表示，歌词变量名声明的和指令入参的要一致。

如果对 .lrc 标签所做的CSS修饰、改动较少，可挂接 style('css样式') 在 tz.lrc() 指令之后，例如：

tz.lrc(gc).style('left: 20px; bottom: 20px');

但如果CSS代码较多，建议如本帖一样，创建 .lrc {} CSS选择器，在花括号里面写好样式代码。

二、.lrc 选择器设置技巧

如果引用了 tz.*.css 文档资源，则已存在一个 .lrc {} 选择器，它提供几个CSS变量以便可以进行简单设置，无需设置伪元素的同步机制：

其一：--c1 变量，--c2 变量，用于设置 .lrc 伪元素的同步渐变颜色；

其二：--rect 变量，用于指明同步走向，缺省或默认是从左向右，可另外设定，例如本帖的从上到下，--rect: 0 0 100% 0; 的表达式，共四个值，分别代表四个方向，即上、右、下、左，本帖的下是 100%，意味着从上到下；

其三：--border 变量，用于设定同步边框方向和厚度，也是四个值，例如本帖的 0 1px 0 0;，也是上、右、下、左的顺序，哪一边右 1px 或 2px 的设定，哪一边就会出现边框。想取消边框，--border: 0px; 就可以了

除了CSS变量设置，还有诸多普通属性设置可以操作。例如，文本颜色，color: red;，左右上下定位相关的 top、left、bottom、right 属性设置等，再如，设置纵向排版（即竖排歌词），使用属性 writing-mode 属性，可网补一下此属性的设置，这里不多说。注意：若设置了竖排歌词，变量 --rect 和 --border 的设置要与之相配套。