论坛 › 音乐沙龙 › 秋

马黑黑 发表于 2025-10-27 12:32

秋

本帖最后由 马黑黑 于 2025-10-27 13:11 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qq66.webp') no-repeat center/cover; }
        li-zi { position: absolute; top: -20px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; animation: down var(--duration) var(--delay) linear infinite var(--state); }
        @keyframes down { to { transform: translateY(var(--yy)); } }
</style>

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

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

        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2077974904'});
        tz.add('img', '', 'rotate-ani sepia', {src: 'https://638183.freep.cn/638183/small/webp/f02.webp'}).playmp3();

        const total = 30;
        let frg = document.createDocumentFragment();
        Array.from({length: total}).forEach((lz, idx) => {
                lz = document.createElement('li-zi');
                lz.style.cssText += `
                        --duration: ${tz.getRanInt(8, 16)}s;
                        --delay: ${tz.getRanInt(-10, 0)}s;
                        --yy: ${pa.offsetHeight + 40}px;
                        left: ${tz.ranPos(pa.offsetWidth, 20)}px;
                        background: linear-gradient(${tz.getRanInt(30, 180)}deg, ${tz.color16()}, ${tz.color16()});
                `;
                frg.appendChild(lz);
        });
        pa.appendChild(frg);
</script>

马黑黑 发表于 2025-10-27 12:33

本帖最后由 马黑黑 于 2025-10-27 13:11 编辑

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qq66.webp') no-repeat center/cover; }
    li-zi { position: absolute; top: -20px; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; animation: down var(--duration) var(--delay) linear infinite var(--state); }
    @keyframes down { to { transform: translateY(var(--yy)); } }
</style>

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

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

    tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=2077974904'});
    tz.add('img', '', 'rotate-ani sepia', {src: 'https://638183.freep.cn/638183/small/webp/f02.webp'}).playmp3();

    const total = 30;
    let frg = document.createDocumentFragment();
    Array.from({length: total}).forEach((lz, idx) => {
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            --duration: ${tz.getRanInt(8, 16)}s;
            --delay: ${tz.getRanInt(-10, 0)}s;
            --yy: ${pa.offsetHeight + 40}px;
            left: ${tz.ranPos(pa.offsetWidth, 20)}px;
            background: linear-gradient(${tz.getRanInt(30, 180)}deg, ${tz.color16()}, ${tz.color16()});
      `;
      frg.appendChild(lz);
    });
    pa.appendChild(frg);
</script>

马黑黑 发表于 2025-10-27 12:46

本帖演示 tzMaker 自定义粒子系统。

粒子系统首先通过CSS li-zi 选择器设计了基础样式，包括尺寸、形状、运行的动画等内容。其次，在JS中，动态创建 30 个 <li-zi> 标签，设置几个CSS变量、粒子的水平位置、背景色，这里大量借用 tzMaker 提供的通用方法分别获取两个整数之间的随机整数、随机16进制颜色。

tz.color16() 指令比较好理解，它获取随机的16进制颜色，返回颜色值（例如，#5d668c）；

tz.getRanInt(min, max) 指令获取两个整数之间的随机整数，含边界数，返回随机整数。例如想在 0~20之间得到一个随机数，用 tz.getRanInt(0, 20) 或 tz.getRanInt(20, 0) 都可以实现。

这类工具性指令可以简化表达式的拼装。像第 26 行代码，三次获取随机值，如果使用原始的做法，代码恐怕会比较繁琐，指令使用tz提供的两个工具指令就很方便，更不用太多操心字符拼接问题。

马黑黑 发表于 2025-10-27 12:49

另外，本帖没有进度条，没有全屏切换按钮。tzMaker就像搭积木一样，需要什么拿什么。

至于本帖为什么不放进度条和全屏按钮，很简单：帖子可变宽高会是的CSS动画的设计复杂化，所以不要全屏按钮；进度条则是忘了加。

杨帆 发表于 2025-10-27 13:07

漂亮，一派迷人的秋景……

li-zi 运行动画好像未控制呀？

马黑黑 发表于 2025-10-27 13:10

杨帆 发表于 2025-10-27 13:07
漂亮，一派迷人的秋景……

li-zi 运行动画好像未控制呀？

对。没有加 var(--state)

寒冬残荷 发表于 2025-10-27 14:29

喜欢这个播放按钮图{:5_106:}

红影 发表于 2025-10-27 14:53

马黑黑 发表于 2025-10-27 12:49
另外，本帖没有进度条，没有全屏切换按钮。tzMaker就像搭积木一样，需要什么拿什么。

至于本帖为什么不 ...

昨天的文字的那个也没有加全屏，tzMaker还真是像搭积木呢，想要什么就调出什么来{:4_204:}

红影 发表于 2025-10-27 14:54

这些粒子小球漂亮，不但是随机色，还是线性渐变的随机色，每个小球都是多色的彩球呢{:4_199:}

红影 发表于 2025-10-27 14:57

夕阳里的秋，秋也是四季中的暮年了，不像春那么朝气蓬勃，却很宁静厚重{:4_204:}

梦江南 发表于 2025-10-27 17:01

好漂亮的小播。秋意浓了！

马黑黑 发表于 2025-10-27 18:01

梦江南 发表于 2025-10-27 17:01
好漂亮的小播。秋意浓了！

要入冬了

马黑黑 发表于 2025-10-27 18:08

红影 发表于 2025-10-27 14:53
昨天的文字的那个也没有加全屏，tzMaker还真是像搭积木呢，想要什么就调出什么来

对的

朵拉 发表于 2025-10-27 22:14

效果漂亮，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-10-27 22:57

朵拉 发表于 2025-10-27 22:14
效果漂亮，学生已交作业，请老师指正

{:4_199:}

偶然~ 发表于 2025-11-17 13:47

来欣赏马老师的精品佳作，祝您创作如春泉涌流不息！

偶然~ 发表于 2025-11-17 15:03

音画唯美

偶然~ 发表于 2025-11-17 15:03

歌声动听

偶然~ 发表于 2025-11-17 15:04

制作大气，我喜欢！

偶然~ 发表于 2025-11-17 15:04

音画合一，音乐与画面结合完美

查看完整版本: 秋