马黑黑 发表于 2025-11-7 19:42

烟雨云台（tzMaker中级教程一演示示例）

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/yyyt.jpg') no-repeat center/cover; }
        .lz { width: 40px; height: 40px; border-radius: 0 100%; background: linear-gradient(var(--cc), lightgreen); transition: .5s; animation: rot 4s linear infinite var(--state); }
        #player:hover .lz { filter: hue-rotate(150deg); rotate: 1 0.5 0.5 180deg; }
</style>

<div id="pa" class="pa"></div>

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
        const tz = TZ.TZ('pa');

        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2088974054' });
        tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/08/42/5d2216ee86417.mp4' });
        tz.bgprog().style('bottom: 20px; color: lightyellow');
        tz.fs().style('right: 20px; top: 20px');
        tz.add('div', 'player', 'ma').style('bottom: 100px').playmp3();
        tz.lzRing(10, 'player', { className: 'lz', cc: true, delay: -4 });
</script>

马黑黑 发表于 2025-11-7 19:43

帖子代码

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/yyyt.jpg') no-repeat center/cover; }
        .lz { width: 40px; height: 40px; border-radius: 0 100%; background: linear-gradient(var(--cc), lightgreen); transition: .5s; animation: rot 4s linear infinite var(--state); }
        #player:hover .lz { filter: hue-rotate(150deg); rotate: 1 0.5 0.5 180deg; }
</style>

<div id="pa" class="pa"></div>

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v2.js';
        const tz = TZ.TZ('pa');

        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2088974054' });
        tz.add('video', '', 'pd-vid', { src: 'https://img.tukuppt.com/video_show/2418175/00/08/42/5d2216ee86417.mp4' });
        tz.bgprog().style('bottom: 20px; color: lightyellow');
        tz.fs().style('right: 20px; top: 20px');
        tz.add('div', 'player', 'ma').style('bottom: 100px').playmp3();
        tz.lzRing(10, 'player', { className: 'lz', cc: true, delay: -4 });
</script>

马黑黑 发表于 2025-11-7 19:44

tzMaker中级教程即将发布，敬请期待

马黑黑 发表于 2025-11-7 19:44

tzMaker中级教程即将发布，敬请期待

红影 发表于 2025-11-7 20:34

这如果小播在转，粒子本身也在转，鼠标触碰后，还会反转，漂亮{:4_199:}

小辣椒 发表于 2025-11-7 22:43

这个树叶粒子播放器{:4_199:}

杨帆 发表于 2025-11-7 23:06

马黑黑 发表于 2025-11-7 19:44
tzMaker中级教程即将发布，敬请期待

看到了，讲解透彻。这个示范也经典，谢谢马老师{:4_176:}

马黑黑 发表于 2025-11-7 23:24

杨帆 发表于 2025-11-7 23:06
看到了，讲解透彻。这个示范也经典，谢谢马老师

{:4_190:}

马黑黑 发表于 2025-11-7 23:24

小辣椒 发表于 2025-11-7 22:43
这个树叶粒子播放器

{:4_190:}

马黑黑 发表于 2025-11-7 23:25

红影 发表于 2025-11-7 20:34
这如果小播在转，粒子本身也在转，鼠标触碰后，还会反转，漂亮

{:4_190:}

樵歌 发表于 2025-11-8 07:43

树叶播放器，很环保{:4_173:}

马黑黑 发表于 2025-11-8 12:03

樵歌 发表于 2025-11-8 07:43
树叶播放器，很环保

低碳排放{:4_189:}

樵歌 发表于 2025-11-8 19:34

马黑黑 发表于 2025-11-8 12:03
低碳排放

无需动力，手动翻转调色。{:4_189:}还

马黑黑 发表于 2025-11-8 20:45

樵歌 发表于 2025-11-8 19:34
无需动力，手动翻转调色。还

一个字：特别好
页: [1]
查看完整版本: 烟雨云台（tzMaker中级教程一演示示例）