论坛 › 马黑黑教程专版 › 广陵王印象曲 - 《上陵》

马黑黑 发表于 2025-11-14 12:44

广陵王印象曲 - 《上陵》

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/glw.webp') no-repeat center/cover; }
        .star { position: absolute; width: 4px; height: 4px; background: lightblue; animation: flash 2s infinite alternate var(--state); }
        .ball { position: absolute; width: 40px; height: 40px; background: linear-gradient(tan, var(--bg)); border-radius: 50%; animation: hue-rot linear .5s infinite alternate var(--state), rot linear 4s infinite var(--state); cursor: pointer; }
        @keyframes flash { to { opacity: 0; transform: rotate(var(--deg)); } }
        @keyframes hue-rot { to { filter: hue-rotate(200deg); } }
</style>

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

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

        tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2687791808' });

        Array.from({length: 100}).forEach( (_, key) => {
                const x = tz.ranPos(pa.offsetWidth);
                const y = tz.ranPos(pa.offsetHeight / 3);
                tz.add('div', '', 'star', { style: `
                        left: ${100 * x / pa.offsetWidth}%;
                        top: ${100 * y / pa.offsetHeight}%;
                        animation-duration: ${1 + tz.getRanInt(1,0)}s;
                        animation-delay: ${tz.getRanInt(-2,0)}s;
                        --deg: ${tz.getRanInt(50, 160)}deg;
                `});
        });
       
        const points = tz.ringPos(10, {
                cx: pa.offsetWidth / 2,
                cy: pa.offsetHeight / 3,
                r1: pa.offsetWidth / 4,
                r2: pa.offsetHeight / 4,
                a: -180,
        });
       
        points.forEach(point => {
                tz.add('div', '', 'ball', {style: `
                        left: ${100 * point / pa.offsetWidth}%;
                        top: ${100 * point / pa.offsetHeight}%;
                        --bg: ${tz.color16()};
                `}).playmp3();
        });
       
        tz.fs().style('left: 20px; bottom: 20px');
</script>

马黑黑 发表于 2025-11-14 12:44

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
    .pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w7/glw.webp') no-repeat center/cover; }
    .star { position: absolute; width: 4px; height: 4px; background: lightblue; animation: flash 2s infinite alternate var(--state); }
    .ball { position: absolute; width: 40px; height: 40px; background: linear-gradient(tan, var(--bg)); border-radius: 50%; animation: hue-rot linear .5s infinite alternate var(--state), rot linear 4s infinite var(--state); cursor: pointer; }
    @keyframes flash { to { opacity: 0; transform: rotate(var(--deg)); } }
    @keyframes hue-rot { to { filter: hue-rotate(200deg); } }
</style>

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

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

    tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=2687791808' });

    Array.from({length: 100}).forEach( (_, key) => {
      const x = tz.ranPos(pa.offsetWidth);
      const y = tz.ranPos(pa.offsetHeight / 3);
      tz.add('div', '', 'star', { style: `
            left: ${100 * x / pa.offsetWidth}%;
            top: ${100 * y / pa.offsetHeight}%;
            animation-duration: ${1 + tz.getRanInt(1,0)}s;
            animation-delay: ${tz.getRanInt(-2,0)}s;
            --deg: ${tz.getRanInt(50, 160)}deg;
      `});
    });
   
    const points = tz.ringPos(10, {
      cx: pa.offsetWidth / 2,
      cy: pa.offsetHeight / 3,
      r1: pa.offsetWidth / 4,
      r2: pa.offsetHeight / 4,
      a: -180,
    });
   
    points.forEach(point => {
      tz.add('div', '', 'ball', {style: `
            left: ${100 * point / pa.offsetWidth}%;
            top: ${100 * point / pa.offsetHeight}%;
            --bg: ${tz.color16()};
      `}).playmp3();
    });
   
    tz.fs().style('left: 20px; bottom: 20px');
</script>

马黑黑 发表于 2025-11-14 12:51

帖子做 tzMaker 中级教程四演示之用，粒子的创建均为自定义，但通过 tz.ringPos() 和 tz.ranPos() 两个指令获取粒子的坐标数据，并通过 tz.add() 指令进行实际创建工作。

关于获取圆弧顶点数据、随机点数据，请参阅教程。这里，给粒子定位的实际环节中，即确定粒子的 left 和 top 属性值之时，将所获得的数值转换为百分比数值，以保证帖子容器尺寸发生变化时可以自适应，具体代码分别在 22、23 和 40、41行。

马黑黑 发表于 2025-11-14 13:06

如果帖子中左右两端的小球垂直方向不对称（不齐整），那是因为最初的 ringPos() 算法上有点小瑕疵，硬刷新一下页面可修正此问题。

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

音画唯美

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

制作大气

偶然~ 发表于 2025-11-14 15:05

感谢马老师带来的精彩，辛苦了！祝您创作如春泉涌流不息！

杨帆 发表于 2025-11-14 16:37

效果惊艳，代码简约，谢谢马老师经典示范{:4_180:}

红影 发表于 2025-11-14 20:08

这个有星星还有小球，结合在一起的效果真漂亮。
小球的动画有两个，一个在css里设置了，另一个直接在封装里的吧{:4_204:}

红影 发表于 2025-11-14 20:11

小球的闪烁貌似颜色更漂亮了{:4_187:}

红影 发表于 2025-11-14 20:12

马黑黑 发表于 2025-11-14 12:51
帖子做 tzMaker 中级教程四演示之用，粒子的创建均为自定义，但通过 tz.ringPos() 和 tz.ranPos() 两个指令 ...

这个两个指令好像有专门的帖子做了说明，我赶紧看看去{:4_181:}

马黑黑 发表于 2025-11-14 21:06

红影 发表于 2025-11-14 20:11
小球的闪烁貌似颜色更漂亮了

还好还好

马黑黑 发表于 2025-11-14 21:06

红影 发表于 2025-11-14 20:12
这个两个指令好像有专门的帖子做了说明，我赶紧看看去

嗯嗯，说明过的

马黑黑 发表于 2025-11-14 21:07

红影 发表于 2025-11-14 20:08
这个有星星还有小球，结合在一起的效果真漂亮。
小球的动画有两个，一个在css里设置了，另一个直接在封装 ...

旋转是CSS文档里设置有的

马黑黑 发表于 2025-11-14 21:07

杨帆 发表于 2025-11-14 16:37
效果惊艳，代码简约，谢谢马老师经典示范

{:4_190:}

马黑黑 发表于 2025-11-14 21:07

偶然~ 发表于 2025-11-14 15:04
音画唯美

{:4_191:}

马黑黑 发表于 2025-11-14 21:07

偶然~ 发表于 2025-11-14 15:05
感谢马老师带来的精彩，辛苦了！祝您创作如春泉涌流不息！

{:4_204:}

偶然~ 发表于 2025-11-14 21:19

马黑黑 发表于 2025-11-14 21:07


{:4_180:}

偶然~ 发表于 2025-11-14 21:20

马黑黑 发表于 2025-11-14 21:07


{:4_191:}

朵拉 发表于 2025-11-14 21:39

精彩制作，学生已交作业，请老师指正{:4_190:}

查看完整版本: 广陵王印象曲 - 《上陵》