Speed of Light（继续测试tz.c.trial）

马黑黑 · 发表于 2025-10-12 14:04

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

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

x

马黑黑 · 发表于 2025-10-12 14:04

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.c.trial.css?v1';
.pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/small/2025/light.webp') no-repeat center/cover; --ma-size: 3vw; }
.ma { bottom: 40px; }
.btnFs { left: 20px; top: 20px; }
.prog { bottom: 20px; --prog: lightblue; }
.lz { border-radius: 50%; opacity: .75; offset-path: ellipse(30% 20% at 50% 50%); -webkit-offset-path: ellipse(25% 25% at 70% 30%); }
</style>
<div id="tiezi" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.trial.js?v1';
const tz = TZ.TZ('pa');
// 视频
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4'
});
// 音频
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1403774122'
});
// 帖子中央的运动粒子（帖子容器 id="tiezi"）
tz.lzRan(20, 'tiezi', {
w: 20, /* 粒子宽度 */
h: 20, /* 粒子高度 */
bg: '', /* 背景（空值或缺省会使用随机颜色）*/
className: 'lz path-ani', /* 两个类名，path-ani 由css文档提供 */
duration: 20, /* 关键帧动画周期时长边界值 */
delay: -20 /* 关键帧动画延时边界值（建议负数以前运行动画） */
});
tz.bgprog(); // 进度条
tz.fs(); // 全屏
// 小播
tz.add('div', 'lzpa', 'wrap200 rotate-ani cursor', {title: 'Alt+X'}).playmp3();
tz.lzRot(3, lzpa, {
className: 'ellipse', /* css文档里有一个 .ellipse 选择器 */
a: 180 /* 分割的角度（椭圆满占位所以用圆角度的一半，缺省时是360） */
});
// 解开注释多一个小播（playmp3() 指令这里要加 false 参数避免多次注册键位监听引发冲突无效）
//tz.add('div', 'rr', 'wrap100 rot-ani cursor', {title: 'Alt+X', style: 'right: 30px; top: 30px;'}).playmp3('rr', false);
//tz.lzRing(10, 'rr', {className: 'circle'}); // 绕圈小球粒子（css文档里有一个 .circle 选择器）
</script>

复制代码

马黑黑 · 发表于 2025-10-12 14:12

先声明：.trial 版本的资源都是尚未定型的版本，不保证能正常运行，同时不保证资源文档的永久存在性。

tz.c 应该算是进入杀青阶段，这个版本将提供几个工具方法、新增若干指令。

本帖主要测试新指令 lzRan() ，它用于生成随机粒子；代码的后面顺带测试它的兄弟 lzRing() 指令，它用来做绕圈粒子（同时在此处同时测试改进的 playmp3() 指令，它新增一个参数，这样设置多个小播时能保证快捷键的重复注册）。

CSS文档也添加几个选择器，目前文档尚未仔细审核、整理，有点凌乱。