布道人

马黑黑 · 发表于 2026-7-20 16:33

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

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

x

马黑黑 · 发表于 2026-7-20 16:33

帖子代码：

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa { --bg: url('https://img1.qunarzz.com/travel/d8/1710/4e/7834e8b24a1da8b5.jpg') no-repeat center/cover; --ma-size: 12%; }
#msvg { position: absolute; left: 100px; cursor: pointer; }
</style>
<div class="pa">
<svg id="msvg" width="600" height="400">
<title>alt+x</title>
<defs>
<path id="tpath" d="M20 200 Q120 -40,300 200 T580 200">
<animate attributeName="d" values="M20 200 Q120 -40,300 200 T580 200;M20 200 Q120 440,300 200 T580 200;M20 200 Q120 -40,300 200 T580 200" dur="2s" repeatCount="indefinite" />
</path>
</defs>
<text font-size="30" fill="none" stroke="navy" stroke-width="4" dominant-baseline="middle">
<textPath id="txtpath" href="#tpath">🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢</textPath>
</text>
</svg>
</div>
<script>
var gc = `[00:01.212]布道人\n[00:12.136]歌手：塞壬唱片-MSR/z1on/ReStudio\n[00:20.104]词曲：z1on/ReStudio/MSR Studio\n[00:27.813]Ex tenuī filo lucis texor,\n[00:36.614]sine vultu, sine certā vi.\n[00:45.294]In me manūs quondam mollī\n[00:51.454]signa levia reliquērunt mihi.\n[01:00.688]Non habeō spīritum spīritum spīritumnec flātum.\n[01:10.872]Vela susurrant in reverberīs\n[01:18.982]docent quid servandī, quid transeundī.\n[01:31.320]Aspicis, vīvō.\n[01:39.930]Per umbram sine fīne vagī,\n[01:48.616]vocātum non sonīs sed radiī.\n[01:56.408]Oculīs clausīs intellegitur,\n[02:04.006]quod sub corde mundī humilīs latet.\n[02:12.599]Non habeō spīritum spīritum spīritum nec flātum.\n[02:22.305]Auria resonant in sacrīs vīlīs\n[02:30.983]indicant quid orandī, quid sperandī.\n[02:38.767]Aspicis, vīvō.\n[02:41.970]Stillant tenebrae\n[02:45.744]ubī vēritās erat.\n[02:50.863]Memorīa manāt intus vērī\n[02:55.718]q silentia ferunt sibi.\n[02:59.247]Umbrārum via currit alibī\n[03:07.832]sed sēnsus manet levis.\n[03:18.762]Immortāle spirat in arcānīs\n[03:27.455]suadet quid manendī, quid abeundī.`;
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js';
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=3407447480'});
tz.add('img', '', 'ma', {src: 'https://638183.freep.cn/638183/small/2025/b3.png'}).style('left: 20px; opacity: 0.65;').playmp3();
tz.playmp3('msvg');
tz.bgprog().style('left: 120px; bottom: 40px; color: #fefefe; width: 240px;');
tz.lrc(tz.lrc2HC(gc), '', false).style('left: 30px; top: 30px;');
tz.fs().style('right: 20px; top: 40px;');
tz.aud.addEventListener('pause', () => msvg.pauseAnimations());
tz.aud.addEventListener('play', () => msvg.unpauseAnimations());
tz.autoMid();
}
</script>

复制代码

马黑黑 · 发表于 2026-7-20 16:34

帖子主体代码由 tzMaker v5高能电饭煲生成，在此基础上加入：

（一）SVG 文本路径相关动画。CSS代码在 04 行、SVG代码在 08~18 行、JS代码在 39 行、43~44 行。其中的 43~44 行——

tz.aud.addEventListener('pause', () => msvg.pauseAnimations());
tz.aud.addEventListener('play', () => msvg.unpauseAnimations());

——用于监听tz 对象的 aud 标签，不能用 onpause 和 onplay，因为这样会和 tz 对象的同类监听想冲突或被干扰，而 addEventListener 方式则可以彼此阻隔、互不干扰。

（二）小播（代码在 38 行）的 style 设置加入 opacity 属性设置，以此来确保它永远展示（不自动隐藏）。这是配套 SVG 动画的设计，SVG 舞动的小珠串需要“动力”，小播作为“母球”，其旋转所带来的动力驱动珠串的摆动。令，SVG也是小播，或称小播的辅助小播，核心代码在 39 行。