我好心疼现在的自己 (柔情版) （学习套用黑黑在雨中（tzMaker d.trial应用测试）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.d.trial.css';
.pa { --offsetX: 81px; margin: 130px 0 40px calc(50% - 390px); --bg: tan url('https://xlaj.cn/upfile/2025/10/01.jpg') no-repeat center/cover; --ma-size: 3vw; }
/* 小播内部零件尺寸及切割、旋转中心等设置，代码偏长单独放这*/
.rect {width: 25%; height: 50%; clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom; }
</style>
<div id="tiezi" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.trial.js';
const tz = TZ.TZ('pa');
// 歌词（花朝格式）
let geci = [ ['0.00', '我好心疼现在的自己 (柔情版) ',6.07],
['6.39', '歌手： 洋澜一',3.16],
['9.72', '混音/母带：廖伟志',2.25],
['12.09', '制作人：廖伟志 ',3.68],
['15.96', '在清晨赶路',0.84],
['16.84', '在傍晚回家',1.67],
['18.60', '忙忙碌碌不知多少年',3.01],
['21.77', '在梦里渴望',1.67],
['23.53', '在深夜疗伤',1.65],
['25.27', '在风里蹒跚流浪',3.05],
['28.48', '岁月风霜了容颜',3.26],
['31.91', '青春流逝弹指间',3.22],
['35.30', '回望前半生',1.72],
['37.11', '最美好的是从前',4.85],
['42.21', '我好心疼现在的自己',3.19],
['45.57', '我好怀念那时的年轻',3.28],
['49.02', '有些悲伤在我心中挥之不去',3.23],
['52.42', '总在黎明时分暗自叹息',3.31],
['55.90', '我好心疼现在的自己',3.11],
['59.17', '孑孓一人吞咽着风雨',3.31],
['62.65', '可我坚信那些愁苦伤痛别离',3.24],
['66.06', '终将慢慢飘散云淡风轻',3.96],
['70.23', '歌词同步编辑：小辣椒',12.66],
['83.56', '在清晨赶路',1.64],
['85.29', '在傍晚回家',1.75],
['87.13', '忙忙碌碌不知多少年',3.04],
['90.33', '在梦里渴望',1.72],
['92.14', '在深夜疗伤',1.59],
['93.81', '在风里蹒跚流浪',3.05],
['97.02', '岁月风霜了容颜',3.21],
['100.40', '青春流逝弹指间',3.35],
['103.93', '回望前半生',1.78],
['105.80', '最美好的是从前',4.68],
['110.73', '我好心疼现在的自己',3.22],
['114.12', '我好怀念那时的年轻',3.17],
['117.46', '有些悲伤在我心中挥之不去',3.36],
['121.00', '总在黎明时分暗自叹息',3.25],
['124.42', '我好心疼现在的自己',3.30],
['127.89', '孑孓一人吞咽着风雨',3.15],
['131.21', '可我坚信那些愁苦伤痛别离',3.32],
['134.71', '终将慢慢飘散云淡风轻',4.23],
['139.16', '。。。。。。',12.15],
['151.95', '我好心疼现在的自己',3.15],
['155.27', '我好怀念那时的年轻',3.22],
['158.66', '有些悲伤在我心中挥之不去',3.36],
['162.20', '总在黎明时分暗自叹息',3.28],
['165.65', '我好心疼现在的自己',3.32],
['169.15', '孑孓一人吞咽着风雨',3.17],
['172.49', '可我坚信那些愁苦伤痛别离',3.29],
['175.95', '终将慢慢飘散云淡风轻',3.76],
['179.91', '谢谢欣赏',14.63],
['195.31', '',4.5]];
// 大熊视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4'
});
// 加上音频
tz.add('audio', '', '', {
src: 'https://xlaj.cn/upfile/2025/10/01.mp3'
});
/** 以下创建LRC歌词同步标签
除left、top定位必须设置，其余可以缺省使用默认配置
style() 指令的设置可以搬到CSS代码，置入 .lrc {} 选择器中
指令里面的内容需要分行写时使用反引号，写在一行可用单引号
**/
tz.lrc(geci).style(`
#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 40%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
`);
// 创建进度条 : 设置位置和进度颜色
tz.bgprog().style('left: 22%; width:50%; height: 3px;); bottom: 27%; --prog: DarkGray;');
// 创建一个 id="player" 的标签，加三个类名，还定位、设置子元素布局行为
tz.add('div', 'player', 'wrap100 rot-ani cursor', {
title: 'Alt+X', style: 'left: 70%; bottom: 70%; place-items: start center;'
}).playmp3();
// 小播内部零件装进 id="player" 标签
tz.lzRot(8, 'player', {className: 'rect'});
// 全屏 : 并设置定位和颜色
tz.fs().style('top: 10px; right: 47%; color: DimGray;');
</script> @马黑黑
黑黑看见这个有进度条带了歌词同步，还有这么具体的备注，开始感觉可以直接套用玩一个。结果自己喜欢的效果改不了，小辣椒只能这样发了，
歌词我改了颜色没有用，看了是默认的颜色，看见默认的歌词出来效果也是蛮好，就直接用了
反正要速度完成，这个小辣椒有难度的，不会修改{:4_198:}
感谢黑黑源码分享{:4_187:} 我先下了，晚安~~ 小辣椒 发表于 2025-10-17 22:43
@马黑黑
黑黑看见这个有进度条带了歌词同步，还有这么具体的备注，开始感觉可以直接套用玩一个。结果自 ...
tzMaker 有一整套实现方案。比方你要加个图片：
tz.add('img', '', '', { src: '图片地址', alt: '', width: 300, height: 240, style: 'position: absolute; left: 120px; top: 300px;' });
也可以这样：
在 CSS 代码中设计好图片选择器，比如 .mypic :
.mypic: { position: absolute; width: 300px; left: 80px; top: 50px; }
然后在 JS 代码中：
tz.add('img', '', 'mypic', { src: '图片地址', alt: ''}); 这个好漂亮，视频和背景吻合得这么好呢，进度条的设计和安放也很恰当。
欣赏亲爱的好帖{:4_199:} 这歌曲有意思，还以为是亲爱的心疼自己呢{:4_173:} 很简约，很好看，就是听不到声音{:4_203:} 问好小辣椒，看到你真高兴。又这么晚了，下吧。{:5_150:} 江南同樵 歌老师一样，只看到图，没听到音乐声。 保护视力、善待自己、健康快乐、强壮身体。 樵歌 发表于 2025-10-18 07:31
很简约，很好看，就是听不到声音
樵哥哥上传空间硬件升级，需要2天时间 梦江南 发表于 2025-10-18 07:46
江南同樵 歌老师一样，只看到图，没听到音乐声。
阿姨好，因为空间升级，需要2天，我现在换了上传连接了 梦油 发表于 2025-10-18 08:17
保护视力、善待自己、健康快乐、强壮身体。
问好梦油，谢谢关心{:4_171:} 梦江南 发表于 2025-10-18 07:45
问好小辣椒，看到你真高兴。又这么晚了，下吧。
谢谢阿姨关心，昨天上来看见这个有备注的我感觉简单就做了一个，其实发现要自己修改自己想要的效果，还是比较难的，只能简单套用一个了 马黑黑 发表于 2025-10-17 22:53
tzMaker 有一整套实现方案。比方你要加个图片：
tz.add('img', '', '', { src: '图片地址', alt: '',...
发现要自己想要的效果，得动脑子的{:4_170:} 红影 发表于 2025-10-17 23:06
这个好漂亮，视频和背景吻合得这么好呢，进度条的设计和安放也很恰当。
欣赏亲爱的好帖
亲爱的，进度条其实我想修改音乐时间位置，没有成功的 红影 发表于 2025-10-17 23:08
这歌曲有意思，还以为是亲爱的心疼自己呢
我只是和朋友玩同一首歌曲{:4_173:} 小辣椒 发表于 2025-10-18 13:53
问好梦油，谢谢关心
小辣椒朋友不客气。 小辣椒 发表于 2025-10-18 13:56
发现要自己想要的效果，得动脑子的
你先把 tz 那个重要的 add() 指令吃透，必要时外加一个链式的 style() 指令，一般花五分钟可以理解透彻，然后你就可以为所欲为。
你要做的无非就是添加一些元素，add() 指令就是添加元素的，style() 指令时附加设置CSS的。
当然还有一个变通的方法：继续使用你过去添加元素的方法安排你的布局，tz 不会去干扰你的安排，你要做的只是由 tz 添加的元素和你的元素不互相占位子就行。
页:
[1]
2