布道人

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

马黑黑 发表于 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 = `布道人\n歌手：塞壬唱片-MSR/z1on/ReStudio\n词曲：z1on/ReStudio/MSR Studio\nEx tenuī filo lucis texor,\nsine vultu, sine certā vi.\nIn me manūs quondam mollī\nsigna levia reliquērunt mihi.\nNon habeō spīritum spīritum spīritumnec flātum.\nVela susurrant in reverberīs\ndocent quid servandī, quid transeundī.\nAspicis, vīvō.\nPer umbram sine fīne vagī,\nvocātum non sonīs sed radiī.\nOculīs clausīs intellegitur,\nquod sub corde mundī humilīs latet.\nNon habeō spīritum spīritum spīritum nec flātum.\nAuria resonant in sacrīs vīlīs\nindicant quid orandī, quid sperandī.\nAspicis, vīvō.\nStillant tenebrae\nubī vēritās erat.\nMemorīa manāt intus vērī\nq silentia ferunt sibi.\nUmbrārum via currit alibī\nsed sēnsus manet levis.\nImmortāle spirat in arcānīs\nsuadet 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 行。

梦江南 发表于 2026-7-20 18:52

黑黑老师，这小播像一条蚯蚓一样太可爱了，有意思。{:4_187:}

梦江南 发表于 2026-7-20 18:55

黑黑老师，布道人是指基督教中专门从事福音传播的信徒或宗教人士，通过讲道、教导和劝勉引导人信靠神并接受救恩。是不是这个意思啊！{:4_199:}

梦江南 发表于 2026-7-20 18:58

这绿色小圆球的动态是不是老师的一种代码实践？{:4_204:}

霜染枫丹 发表于 2026-7-20 21:05

马老师晚上好~~
您这是创意无限！特别灵动的一串绿球球，很好看，很赞佩！{:4_204:}{:4_190:}

马黑黑 发表于 2026-7-20 21:51

霜染枫丹发表于 2026-7-20 21:05
马老师晚上好~~
您这是创意无限！特别灵动的一串绿球球，很好看，很赞佩！

这串绿色的珠子是用文本做成的

马黑黑 发表于 2026-7-20 21:52

梦江南发表于 2026-7-20 18:58
这绿色小圆球的动态是不是老师的一种代码实践？

这个在2024年10月份就已经展示过：

http://mhh.52qingyin.cn/art/show.php?st=4&sd=4&art=mahei_1728210951

论坛也应该有

马黑黑 发表于 2026-7-20 21:53

梦江南发表于 2026-7-20 18:55
黑黑老师，布道人是指基督教中专门从事福音传播的信徒或宗教人士，通过讲道、教导和劝勉引导人信靠神并接受 ...

布道是教主和信徒之间的活动，教主是指导老师，信徒是学生

马黑黑 发表于 2026-7-20 21:53

梦江南发表于 2026-7-20 18:52
黑黑老师，这小播像一条蚯蚓一样太可爱了，有意思。

文本珠串

红影发表于 2026-7-20 22:10

这文本路径动画真漂亮，SVG的绘制都快忘光了{:4_173:}

红影发表于 2026-7-20 22:10

欣赏嘿嘿好帖，这个制作真漂亮{:4_187:}

玫瑰发表于 2026-7-20 22:16

精彩的分享。

马黑黑 发表于 2026-7-20 22:40

红影发表于 2026-7-20 22:10
这文本路径动画真漂亮，SVG的绘制都快忘光了

SVG花十分钟就能学会，但是要掌握它，可能需要大半辈子的时间{:4_170:}

马黑黑 发表于 2026-7-20 22:40

玫瑰发表于 2026-7-20 22:16
精彩的分享。

晚上嚎

马黑黑 发表于 2026-7-20 22:40

红影发表于 2026-7-20 22:10
欣赏嘿嘿好帖，这个制作真漂亮

谢欣

玫瑰发表于 2026-7-20 22:42

马黑黑发表于 2026-7-20 22:40
晚上嚎

嚎嚎嚎晚上好

马黑黑 发表于 2026-7-20 22:43

玫瑰发表于 2026-7-20 22:42
嚎嚎嚎晚上好

嚎嚎更快乐

玫瑰发表于 2026-7-20 22:44

马黑黑发表于 2026-7-20 22:43
嚎嚎更快乐

嚎嚎更快乐
这个很对

页: [1] 2 3 4

花潮论坛's Archiver

布道人