战役

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/ca.webp') no-repeat center/cover; color: tan; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .pd-vid { opacity: 1; mix-blend-mode: screen; }
   
7.     .bl { width: 60px; transform: rotate(90deg); animation: offset-distance 2s forwards; }
   
8.     #player1 { position: absolute; top: 70px; width: 80px; height: 80px; }
   
9. </style>
   
10. 
    
11. <div id="pa" class="pa">
    
12.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2414777/00/01/61/5b46fac6a7c49.mp4" autoplay loop muted></video>
    
13.     <div id="player1"></div>
    
14. </div>
    
15. 
    
16. <script>
    
17.     var options = {
    
18.         pa: '.pa',
    
19.         urls: [['https://music.163.com/song/media/outer/url?id=1991802530', '战役']],
    
20.         btns: [player1],
    
21.     };
    
22. 
    
23.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
24. 
    
25.     function tzRun() {
    
26.         var aud = new AudPlayer(options);
    
27. 
    
28.         const frg = new DocumentFragment(), num = 5;
    
29.         for (let i = 0; i < num; i++) {
    
30.             const img = document.createElement('img');
    
31.             img.src = 'https://638183.freep.cn/638183/small/2026/bullet.png';
    
32.             img.alt = '';
    
33.             img.className = 'bl';
    
34.             img.style.offsetPath = `ray(${360 / num * i}deg)`;
    
35.             img.style.animationDelay = i + 1 + 's';
    
36.             if (i === num - 1) img.onanimationend = () => player1.classList.add('rot');
    
37.             frg.appendChild(img);
    
38.         }
    
39.         player1.appendChild(frg);
    
40.     }
    
41. 
    
42.     function loadJs(url, callback) {
    
43.         var script = document.createElement('script');
    
44.         script.charset = 'utf-8';
    
45.         script.src = url;
    
46.         script.onload = function() {
    
47.             if (callback) callback();
    
48.         };
    
49.         document.head.appendChild(script);
    
50.     }
    
51. </script>

复制代码

马黑黑

辅助子弹图案小播：

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

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

马黑黑

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

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

杨帆

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

梦油

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

宕..

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

霜染枫丹

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

红影

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

马黑黑

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

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

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

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

首长节日好！

马黑黑

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