论坛 › 动画音画 › 战役

马黑黑 发表于 2026-7-31 13:07

战役

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/ca.webp') no-repeat center/cover; color: tan; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { opacity: 1; mix-blend-mode: screen; }
    .bl { width: 60px; transform: rotate(90deg); animation: offset-distance 2s forwards; }
    #player1 { position: absolute; top: 70px; width: 80px; height: 80px; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2414777/00/01/61/5b46fac6a7c49.mp4" autoplay loop muted></video>
    <div id="player1"></div>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1991802530', '战役']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);

      const frg = new DocumentFragment(), num = 5;
      for (let i = 0; i < num; i++) {
            const img = document.createElement('img');
            img.src = 'https://638183.freep.cn/638183/small/2026/bullet.png';
            img.alt = '';
            img.className = 'bl';
            img.style.offsetPath = `ray(${360 / num * i}deg)`;
            img.style.animationDelay = i + 1 + 's';
            if (i === num - 1) img.onanimationend = () => player1.classList.add('rot');
            frg.appendChild(img);
      }
      player1.appendChild(frg);
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-7-31 13:09

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/ca.webp') no-repeat center/cover; color: tan; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { opacity: 1; mix-blend-mode: screen; }
    .bl { width: 60px; transform: rotate(90deg); animation: offset-distance 2s forwards; }
    #player1 { position: absolute; top: 70px; width: 80px; height: 80px; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2414777/00/01/61/5b46fac6a7c49.mp4" autoplay loop muted></video>
    <div id="player1"></div>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1991802530', '战役']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);

      const frg = new DocumentFragment(), num = 5;
      for (let i = 0; i < num; i++) {
            const img = document.createElement('img');
            img.src = 'https://638183.freep.cn/638183/small/2026/bullet.png';
            img.alt = '';
            img.className = 'bl';
            img.style.offsetPath = `ray(${360 / num * i}deg)`;
            img.style.animationDelay = i + 1 + 's';
            if (i === num - 1) img.onanimationend = () => player1.classList.add('rot');
            frg.appendChild(img);
      }
      player1.appendChild(frg);
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-7-31 13:12

辅助子弹图案小播：

父元素 id="player1"，其内由 JS 动态生成五张图片，图片运行 offset-distance 动画（audioplayer.css 自带）。子弹图片的相抵路径 offset-path 使用 ray() 函数单参数构建。

关于 ray() 函数单参数的使用方法，请参阅：https://www.huachaowang.com/forum.php?mod=viewthread&tid=95004&extra=page%3D1

马黑黑 发表于 2026-7-31 13:17

子弹图片为什么要旋转90度（transform: rotate(90deg); ，代码在 07行）？

原始图片子弹头朝上，它需要朝右才能在 offset-path 中保持子弹根部对准中心点、子弹头指向边界的状态。

杨帆 发表于 2026-7-31 15:10

震撼的效果，看到ray() 函数的应用实例很开心，谢谢马老师精彩示范{:4_190:}

梦油 发表于 2026-7-31 16:46

用子弹制作的播放器很有创意也很应景。
向英勇的中国人民解放军致敬！
问好黑黑先生！

宕.. 发表于 2026-7-31 17:23

只能听到音乐，感觉施瓦辛格的未来战士出场了？七七咔嚓的音乐元素很丰富，待晚些我手机上来瞧瞧{:4_193:}

霜染枫丹 发表于 2026-7-31 17:23

马老师下午好！技术含量太高，我需要慢慢理解。感谢分享，夏安！{:4_204:}{:4_190:}

红影 发表于 2026-7-31 20:13

子弹朝五个方向走到位，然后旋转。子弹的选择和视频效果的色彩很相符，漂亮的制作。
通过帖子，ray() 函数的射线路径更清楚了，欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-7-31 21:04

红影 发表于 2026-7-31 20:13
子弹朝五个方向走到位，然后旋转。子弹的选择和视频效果的色彩很相符，漂亮的制作。
通过帖子，ray() 函数 ...

你的理解不准确，要么是没看仔细。

子弹是事先旋转好的（先摆pose），子弹头朝向右侧。这是为了适配 ray() 射线：ray() 生成的相抵路径，0deg 头朝上，逆转90度，因此，原本朝上的子弹头得指向右侧。

射线路径依据角度指向不同的方向，无需通过旋转元素去构图，这和 svgdr 的 rotates 指令不一样，不同概念。本帖之所以先得让子弹头旋转 90 度，前面已经解释，是图片朝向没朝向右侧才需要做的动作，每个子弹都是这样。

马黑黑 发表于 2026-7-31 21:05

宕.. 发表于 2026-7-31 17:23
只能听到音乐，感觉施瓦辛格的未来战士出场了？七七咔嚓的音乐元素很丰富，待晚些我手机上来瞧瞧

浏览器还是需要换的，不仅仅为了兼容，更是为了省心

马黑黑 发表于 2026-7-31 21:06

霜染枫丹 发表于 2026-7-31 17:23
马老师下午好！技术含量太高，我需要慢慢理解。感谢分享，夏安！

这个也没什么技术含量，一般般的东东

马黑黑 发表于 2026-7-31 21:06

梦油 发表于 2026-7-31 16:46
用子弹制作的播放器很有创意也很应景。
向英勇的中国人民解放军致敬！
问好黑黑先生！

首长节日好！

马黑黑 发表于 2026-7-31 21:06

杨帆 发表于 2026-7-31 15:10
震撼的效果，看到ray() 函数的应用实例很开心，谢谢马老师精彩示范

{:4_191:}

宕.. 发表于 2026-7-31 21:49

马黑黑 发表于 2026-7-31 21:05
浏览器还是需要换的，不仅仅为了兼容，更是为了省心

本来想问你要个浏览器地址的，然后忽地想到我电脑自带个浏览器，登录一瞧，就啥都瞧见了{:5_117:}
Microsoft Edge

宕.. 发表于 2026-7-31 21:55

图意震撼，战火遍野成花，弹头设计相当出彩，与标题相得益彰
而音乐的加持更加功不可没，这一幅视觉冲击力超强，赞你！{:5_116:}

马黑黑 发表于 2026-7-31 22:01

宕.. 发表于 2026-7-31 21:55
图意震撼，战火遍野成花，弹头设计相当出彩，与标题相得益彰
而音乐的加持更加功不可没，这一幅视觉冲击力 ...

谢赞。晚上嚎

马黑黑 发表于 2026-7-31 22:02

宕.. 发表于 2026-7-31 21:49
本来想问你要个浏览器地址的，然后忽地想到我电脑自带个浏览器，登录一瞧，就啥都瞧见了
Micro ...

EDGE浏览器是windows自带的，win10/11的话会很好用。顺便提一下：新版Edge已经使用和谷歌浏览器一样的内核

宕.. 发表于 2026-7-31 22:04

马黑黑 发表于 2026-7-31 22:02
EDGE浏览器是windows自带的，win10/11的话会很好用。顺便提一下：新版Edge已经使用和谷歌浏览器一样的内 ...

嗯呢，能正常使用我很开森，多谢你提醒！

红影 发表于 2026-8-1 08:20

马黑黑 发表于 2026-7-31 21:04
你的理解不准确，要么是没看仔细。

子弹是事先旋转好的（先摆pose），子弹头朝向右侧。这是为了适配 r ...

嗯嗯，是我说的不对，子弹在.bl 里已经先摆好位置了，在依据射线路径指向设定的方向。
这个和我们平时的常规用法还是有些不同呢。

查看完整版本: 战役