论坛 › 马黑黑教程专版 › 思念拟人化

马黑黑 发表于 2026-3-2 12:04

思念拟人化

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/xlnm.webp') no-repeat center/cover, linear-gradient(to top right, lightblue, aliceblue, purple); background-blend-mode: multiply; }
.vid { top: 15%; left: 25%; width: 20vw; height: 20vw; border-radius: 50%; cursor: pointer; }
.fadeInLrc { left: 60px; letter-spacing: 4px; writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; }
</style>

<div class="pa"></div>

<script>
var gc = `
孟慧圆『想念拟人化』
有时我怀疑想念
也住在这个房间
只是我 没看见
难得有位朋友了解
遇上爱的小改变
自己都不太察觉
和想念 聊聊天
笑容很甜 幸福多明显
偶尔好几天
想念没出现
我偷偷流过泪
后来听寂寞
说原来想念
也一样失眠
你留下来的想念 还在房间
整理一遍又一遍又一遍
爱情是一种抗体 还是病原
复原 要一点时间
你留下来的想念 在心里面
整理一遍又一遍又一遍
爱情是你的抗体 我的病原
复原 不仅是时间
遇上爱的小改变
自己都不太察觉
和想念 聊聊天
笑容很甜 幸福多明显
偶尔好几天
想念没出现
我偷偷流过泪
后来听寂寞
说原来想念
也一样失眠
你留下来的想念 还在房间
整理一遍又一遍又一遍
爱情是一种抗体 还是病原
复原 要一些时间
你留下来的想念 在心里面
整理一遍又一遍又一遍
爱情是你的抗体 我的病原
复原 不仅是时间
吉他：高飞
录音：时俊峰@福达studio
秦孟达@造音studio
Vocal editor：曾嵘
混音：仓雁彬@KCYB studio
`;
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz.v5.min.js?v=1';
loadJs(jsFile, tzInit);

function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
}

function tzInit() {
    var tz = TZ('pa');
    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1379662223' });
    tz.add('video', '', 'vid ma', {
      src: 'https://img.tukuppt.com/video_show/2629112/00/02/33/5b570a3513f28.mp4',
      poster: 'https://638183.freep.cn/638183/small/envelop.jpg',
      disablePictureInPicture: true
    }).playmp3();

    tz.bgprog().style('bottom: 40px; color: pink; width: 240px;');
    tz.lrc(tz.lrc2HC(gc), '', true);
    tz.fs().style('left: 20px; bottom: 20px; color: purple; background: none;');
    tz.autoMid();
}
</script>

马黑黑 发表于 2026-3-2 12:09

帖子使用高能电饭煲制作，生成代码后略作修改：

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/xlnm.webp') no-repeat center/cover, linear-gradient(to top right, lightblue, aliceblue, purple); background-blend-mode: multiply; }
.vid { top: 15%; left: 25%; width: 20vw; height: 20vw; border-radius: 50%; cursor: pointer; }
.fadeInLrc { left: 60px; letter-spacing: 4px; writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; }
</style>

<div class="pa"></div>

<script>
var gc = `
孟慧圆『想念拟人化』
有时我怀疑想念
也住在这个房间
只是我 没看见
难得有位朋友了解
遇上爱的小改变
自己都不太察觉
和想念 聊聊天
笑容很甜 幸福多明显
偶尔好几天
想念没出现
我偷偷流过泪
后来听寂寞
说原来想念
也一样失眠
你留下来的想念 还在房间
整理一遍又一遍又一遍
爱情是一种抗体 还是病原
复原 要一点时间
你留下来的想念 在心里面
整理一遍又一遍又一遍
爱情是你的抗体 我的病原
复原 不仅是时间
遇上爱的小改变
自己都不太察觉
和想念 聊聊天
笑容很甜 幸福多明显
偶尔好几天
想念没出现
我偷偷流过泪
后来听寂寞
说原来想念
也一样失眠
你留下来的想念 还在房间
整理一遍又一遍又一遍
爱情是一种抗体 还是病原
复原 要一些时间
你留下来的想念 在心里面
整理一遍又一遍又一遍
爱情是你的抗体 我的病原
复原 不仅是时间
吉他：高飞
录音：时俊峰@福达studio
秦孟达@造音studio
Vocal editor：曾嵘
混音：仓雁彬@KCYB studio
`;
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz.v5.min.js?v=1';
loadJs(jsFile, tzInit);

function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
}

function tzInit() {
    var tz = TZ('pa');
    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1379662223' });
    tz.add('video', '', 'vid ma', {
      src: 'https://img.tukuppt.com/video_show/2629112/00/02/33/5b570a3513f28.mp4',
      poster: 'https://638183.freep.cn/638183/small/envelop.jpg',
      disablePictureInPicture: true
    }).playmp3();

    tz.bgprog().style('bottom: 40px; color: pink; width: 240px;');
    tz.lrc(tz.lrc2HC(gc), '', true);
    tz.fs().style('left: 20px; bottom: 20px; color: purple; background: none;');
    tz.autoMid();
}
</script>修改的部分主要是视频播放器，tz.add('video', ...) 指令语句：加一个 ma 类列表属性、句末分号前加 .playmp3() 指令。

另外，需要特别说明的是：LRC歌词如果启用淡入效果，则它对应的 CSS 选择器应为 .fadeInLrc（代码在第6行）。

梦江南 发表于 2026-3-2 15:02

黑黑老师，这帖特别靓丽，风格变了！{:4_187:}

杨帆 发表于 2026-3-2 15:09

极简的代码，极致的效果，极美的示范，祝马老师元宵节快乐{:4_176:}

庶民 发表于 2026-3-2 17:40

太精美了。

马黑黑 发表于 2026-3-2 18:36

庶民 发表于 2026-3-2 17:40
太精美了。

{:4_180:}

马黑黑 发表于 2026-3-2 18:36

杨帆 发表于 2026-3-2 15:09
极简的代码，极致的效果，极美的示范，祝马老师元宵节快乐

{:4_190:}

马黑黑 发表于 2026-3-2 18:37

梦江南 发表于 2026-3-2 15:02
黑黑老师，这帖特别靓丽，风格变了！

{:4_180:}

小辣椒 发表于 2026-3-2 21:29

黑黑你这个是视频小播带歌词同步，是那个电饭煲制作的呢？

小辣椒 发表于 2026-3-2 21:32

黑黑你这个是视频播放器，你什么电饭煲制作的呢？我昨天是V5高能电饭煲制作，三次都没有成功，刚才看了一下我里面的https://638183.freep.cn/638183/tzmaker/tz.v5.min.js和你的不一样，不知道用那个制作，我替换你昨天的提示也是没有用

马黑黑 发表于 2026-3-2 21:39

小辣椒 发表于 2026-3-2 21:32
黑黑你这个是视频播放器，你什么电饭煲制作的呢？我昨天是V5高能电饭煲制作，三次都没有成功，刚才看了一下 ...

就是这里的高能电饭煲，另外一个也一样，得到的代码不同而已，因为二者引入资源的方式不一样。

小辣椒 发表于 2026-3-2 21:50

马黑黑 发表于 2026-3-2 21:39
就是这里的高能电饭煲，另外一个也一样，得到的代码不同而已，因为二者引入资源的方式不一样。

那我做好的代码换你的js就可以了？

小辣椒 发表于 2026-3-2 21:51

马黑黑 发表于 2026-3-2 21:39
就是这里的高能电饭煲，另外一个也一样，得到的代码不同而已，因为二者引入资源的方式不一样。

我是加了背景视频和小播视频，二个视频，会有冲突？

马黑黑 发表于 2026-3-2 22:11

小辣椒 发表于 2026-3-2 21:51
我是加了背景视频和小播视频，二个视频，会有冲突？

不会有冲突。但必须保证修改过的指令没有毛病，有毛病就不能运行。

马黑黑 发表于 2026-3-2 22:11

小辣椒 发表于 2026-3-2 21:50
那我做好的代码换你的js就可以了？

那只说明一个问题：你此前修改的代码有问题。

霜染枫丹 发表于 2026-3-2 22:20

谢谢马老师的示范，代码收藏了，也会制作一个学习一下，您辛苦了，很喜欢的样式。{:4_204:}{:4_190:}

小辣椒 发表于 2026-3-2 22:29

马黑黑 发表于 2026-3-2 22:11
那只说明一个问题：你此前修改的代码有问题。

不能只套用你的，必须自己学会制作，我现在就是不晓得一个html出来自己修改那几个地方，我加的二个视频应该可以出来的，上次送朵拉那个我是按你的二个视频，只是歌词加不上去，加了歌词，电饭煲导出就没有歌词了，郁闷哦，后面玩的时间估计要星期六可以做了

马黑黑 发表于 2026-3-2 23:22

小辣椒 发表于 2026-3-2 22:29
不能只套用你的，必须自己学会制作，我现在就是不晓得一个html出来自己修改那几个地方，我加的二个视频应 ...
这是不理解代码必然存在的问题。tzMaker 封装的指令，核心的就那么几个而且有规律，花一点点时间就能学会，即便仅靠理解相应示例的代码也都能理解的。

需要去理解关键指令的语法结构和用法，不然你永远只能套用。

马黑黑 发表于 2026-3-2 23:23

霜染枫丹 发表于 2026-3-2 22:20
谢谢马老师的示范，代码收藏了，也会制作一个学习一下，您辛苦了，很喜欢的样式。

基本上通过电饭煲制作就好。

红影 发表于 2026-3-2 23:57

这实例真好，能指导做帖子，同时这个帖子很漂亮，很柔情，视频小播很奇特，非常漂亮。
欣赏黑黑好帖{:4_199:}

查看完整版本: 思念拟人化