陈粒·性空山（测试tzMaker.c.trial）

马黑黑 · 发表于 2025-10-10 21:00

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

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

x

马黑黑 · 发表于 2025-10-10 21:01

帖子代码

<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>

复制代码

马黑黑 · 发表于 2025-10-10 21:08

tzMaker.c.trial 是内测版，尚未定型，这里仅供预览。

按照计划，tzMaker.c 将加入少量指令，主要针对粒子层面。本测试帖，播放器子元素是一组环形粒子，右上角的椭圆形路径偏移动画则来自随机分布粒子（它们受到路径的感召去右上角从事维和行动）。

tzMaker 虽然以JS的方式实现帖子的发布，其逻辑性、层次性仍然是清晰、分明的，并且，它的好处是，想要什么就搭建模块提供的内容，不想要什么就不创建它（例如不想要全屏机制，tz.fs() 删掉即可。