战役

马黑黑

马黑黑

帖子代码

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 中保持子弹根部对准中心点、子弹头指向边界的状态。