陈粒·性空山（测试tzMaker.c.trial）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.c.trial.css';
.pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/xku.webp') no-repeat center/cover; --ma-size: 60px; }
.ma { bottom: 60px; }
.btnFs { right: 20px; bottom: 20px; }
.prog { bottom: 20px; width: 300px; height: 8px; background: linear-gradient(90deg, white var(--prg), transparent 0); border-color: white; }
.lz { offset-path: ellipse(20% 15% at 75% 20%); -webkit-offset-path: ellipse(25% 25% at 70% 30%); }
@keyframes climb { from { transform: skew(-2deg); } to { transform: skew(2deg); } }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.trial.js';
const tz = TZ.TZ('pa');
// 视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d87a01df23.mp4'
});
// 音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=2749430420'
});
// 播放器
tz.add('div', 'ring', 'ma', {title: 'Alt+X'}).playmp3();
// 播放器绕圈粒子
tz.lzRing(10, ring, {w: 16, h: 16, bg: 'white'});
// 随机分布粒子 : 椭圆路径运动
tz.lzRan(20, tz.pa, {
w: 30,
h: 20,
bg: `url('https://638183.freep.cn/638183/small/texture/pgy.png') no-repeat center/cover`,
className: 'lz path-ani',
duration: 20,
delay: -20
});
// 音频播放进度
tz.bgprog();
// 全屏
tz.fs();
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.c.trial.css';
.pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/xku.webp') no-repeat center/cover; --ma-size: 60px; }
.ma { bottom: 60px; }
.btnFs { right: 20px; bottom: 20px; }
.prog { bottom: 20px; width: 300px; height: 8px; background: linear-gradient(90deg, white var(--prg), transparent 0); border-color: white; }
.lz { offset-path: ellipse(20% 15% at 75% 20%); -webkit-offset-path: ellipse(25% 25% at 70% 30%); }
@keyframes climb { from { transform: skew(-2deg); } to { transform: skew(2deg); } }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.trial.js';
const tz = TZ.TZ('pa');
// 视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d87a01df23.mp4'
});
// 音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=2749430420'
});
// 播放器
tz.add('div', 'ring', 'ma', {title: 'Alt+X'}).playmp3();
// 播放器绕圈粒子
tz.lzRing(10, ring, {w: 16, h: 16, bg: 'white'});
// 随机分布粒子 : 椭圆路径运动
tz.lzRan(20, tz.pa, {
w: 30,
h: 20,
bg: `url('https://638183.freep.cn/638183/small/texture/pgy.png') no-repeat center/cover`,
className: 'lz path-ani',
duration: 20,
delay: -20
});
// 音频播放进度
tz.bgprog();
// 全屏
tz.fs();
</script>
tzMaker.c.trial 是内测版，尚未定型，这里仅供预览。
按照计划，tzMaker.c 将加入少量指令，主要针对粒子层面。本测试帖，播放器子元素是一组环形粒子，右上角的椭圆形路径偏移动画则来自随机分布粒子（它们受到路径的感召去右上角从事维和行动）。
tzMaker 虽然以JS的方式实现帖子的发布，其逻辑性、层次性仍然是清晰、分明的，并且，它的好处是，想要什么就搭建模块提供的内容，不想要什么就不创建它（例如不想要全屏机制，tz.fs() 删掉即可。 .trial 意思是测试，正式版出来之后可能会删掉。 代码俺 不会，就看图图和音乐，貌似啥好听的歌你都能找到。牛叉！ tzMaker功能越来越完善，谢谢马老师经典探索{:4_176:} 又是一个新版本，黑黑太迅速了{:4_199:} 马黑黑 发表于 2025-10-10 21:08
tzMaker.c.trial 是内测版，尚未定型，这里仅供预览。
按照计划，tzMaker.c 将加入少量指令，主要针对粒 ...
“它的好处是，想要什么就搭建模块提供的内容，不想要什么就不创建它”
这个太好了，什么都具备，且可以不去使用，很牛的功能{:4_199:} 效果漂亮，学生已交作业，请老师指正{:4_190:} 朵拉 发表于 2025-10-11 15:35
效果漂亮，学生已交作业，请老师指正
这个资源是内部测试版，它还很不成熟，将来会删掉。 红影 发表于 2025-10-10 23:32
“它的好处是，想要什么就搭建模块提供的内容，不想要什么就不创建它”
这个太好了，什么都具备，且可以 ...
{:4_180:} 红影 发表于 2025-10-10 23:30
又是一个新版本，黑黑太迅速了
内测版，一览为快，还不成熟 杨帆 发表于 2025-10-10 21:31
tzMaker功能越来越完善，谢谢马老师经典探索
还在测试中 樵歌 发表于 2025-10-10 21:21
代码俺 不会，就看图图和音乐，貌似啥好听的歌你都能找到。牛叉！
人家能唱，俺们能找，这个正常 马黑黑 发表于 2025-10-11 18:53
人家能唱，俺们能找，这个正常
你能找，俺 就能顺{:4_170:} 樵歌 发表于 2025-10-12 08:00
你能找，俺 就能顺
三传手了这{:4_170:} 这次上来看见黑黑的都是有进度条的播放器{:4_199:} 小辣椒 发表于 2025-10-17 20:51
这次上来看见黑黑的都是有进度条的播放器
使用 tz.x.js 模版的，都自动支持进度条，当然只是简洁的元素背景进度条。也可以选择不要，包括全屏按钮，可要可不要，爱要啥只要有就要啥，不想要啥即使有也可以不要，有点像搭积木
页:
[1]