Speed of Light（继续测试tz.c.trial）
<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> 帖子代码
<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>
先声明：.trial 版本的资源都是尚未定型的版本，不保证能正常运行，同时不保证资源文档的永久存在性。
tz.c 应该算是进入杀青阶段，这个版本将提供几个工具方法、新增若干指令。
本帖主要测试新指令 lzRan() ，它用于生成随机粒子；代码的后面顺带测试它的兄弟 lzRing() 指令，它用来做绕圈粒子（同时在此处同时测试改进的 playmp3() 指令，它新增一个参数，这样设置多个小播时能保证快捷键的重复注册）。
CSS文档也添加几个选择器，目前文档尚未仔细审核、整理，有点凌乱。 效果杠杠的，马老师您辛苦了{:4_190:} 越来越完美，功能越来越完全{:4_199:} 制作漂亮，音乐效果也极好{:4_187:} 红影 发表于 2025-10-13 10:15
制作漂亮，音乐效果也极好
{:4_180:} 杨帆 发表于 2025-10-12 17:52
效果杠杠的，马老师您辛苦了
{:4_190:} 红影 发表于 2025-10-13 10:14
越来越完美，功能越来越完全
按计划加入该加入的，指令尽可能压缩 马黑黑 发表于 2025-10-13 16:37
按计划加入该加入的，指令尽可能压缩
黑黑辛苦了{:4_190:} 红影 发表于 2025-10-13 20:31
黑黑辛苦了
没啥没啥，就是玩玩，有空做做，没空想想 漂亮效果，学生已交作业，请老师指正{:4_190:} 朵拉 发表于 2025-10-13 22:47
漂亮效果，学生已交作业，请老师指正
{:4_199:} 这个中间有粒子，效果挺好，还不用做歌词，这个可以直接做给纯音 小辣椒 发表于 2025-10-17 20:50
这个中间有粒子，效果挺好，还不用做歌词，这个可以直接做给纯音
歌词同步版 .d 版开始支持，目前 .d.trial 已经公布，是测试版，正式版明天应该会发布了
页:
[1]