【月满花潮庆华诞】汽 车 摇（学习马黑黑Speed of Light效果）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.c.trial.css?v1';
.pa { --offsetX: 81px; --bg: tan url('https://pic1.imgdb.cn/item/68ed0eebc5157e1a886cdbd9.jpg') 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://cccimg.com/view.php/13008b540404a46e3ac79f6594678f3a.mp3'
});
// 帖子中央的运动粒子（帖子容器 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> @马黑黑
老师 晚上好，学生交作业，请指正{:4_190:} 这个是不是少了个车模{:4_170:} 如果是 @小辣椒 来设计，她应该会将进度条贴在车子的某个合适的位置上 车子有了这个东东怕是要加不少米了吧{:4_173:} 有小播还有粒子，这个制作漂亮。
欣赏朵宝好帖{:4_199:} 马黑黑 发表于 2025-10-13 23:13
如果是 @小辣椒 来设计，她应该会将进度条贴在车子的某个合适的位置上
黑黑这个我虽然没有做过，但这个场景播放器进度条可以移动一下的 欣赏朵拉漂亮的制作{:4_199:} 欣赏朵拉漂亮的制作{:4_199:} 小辣椒 发表于 2025-10-17 21:02
黑黑这个我虽然没有做过，但这个场景播放器进度条可以移动一下的
对，原理在那里
页:
[1]