短兵相接

马黑黑

马黑黑

帖子代码

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/7/dbxj.jpg') no-repeat center/cover; color: lightgreen; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .mpic { width: 50px; offset-anchor: 100% 50%; animation: offset-distance 3s linear infinite alternate var(--state), rot 3s linear infinite var(--state); }
   
7. </style>
   
8. 
   
9. <div id="pa" class="pa"></div>
   
10. 
    
11. <script>
    
12.     var options = {
    
13.         pa: '.pa',
    
14.         urls: [['https://music.163.com/song/media/outer/url?id=1371760676', '短兵相接']],
    
15.     };
    
16. 
    
17.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
18. 
    
19.     function tzRun() {
    
20.         var aud = new AudPlayer(options);
    
21.         
    
22.         const frg = new DocumentFragment(), num = 20;
    
23.         for (let i = 0; i <= num; i ++) {
    
24.             const img = document.createElement('img');
    
25.             img.src = 'https://638183.freep.cn/638183/web/svg/clover4.svg';
    
26.             img.alt = '';
    
27.             img.className = 'mpic';
    
28.             img.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
    
29.             img.style.offsetPath = `ray(${180 / num * i - 90}deg sides at 50% 95%)`;
    
30.             img.style.animationDuration = `${Math.random() * 8 + 8}s`;
    
31.             img.style.animationDelay = `${-10 * Math.random()}s`;
    
32.             frg.appendChild(img);
    
33.         }
    
34.         pa.appendChild(frg);
    
35.     }
    
36. 
    
37.     function loadJs(url, callback) {
    
38.         var script = document.createElement('script');
    
39.         script.charset = 'utf-8';
    
40.         script.src = url;
    
41.         script.onload = function() {
    
42.             if (callback) callback();
    
43.         };
    
44.         document.head.appendChild(script);
    
45.     }
    
46. </script>

复制代码

马黑黑

CSS特效：

ray() 函数动态生成的射线相抵路径具体代码在 29 行，其中的角度计算减去 90，意在令各个运动子元素按向左、向上、向右的方向布局射线走向。

ray() 函数各参数的使用，请参阅：（敬请期待）

马黑黑

射线相抵路径天然参照父元素盒子边框，因此自适应父元素尺寸方面天然具备，无需干预。意思就是，帖子容器的宽高变化，路径会自动跟随变化。

小文

太棒了，问好先生！

梦江南

这些飘下来的小花是用路径来实现的，太棒了！

梦江南

黑黑老师，没分了，不好意思。

霜染枫丹

马老师中午好！
天女散花的短兵相接，音乐的急促和画面的美轮美奂形成气势恢宏的效果，漂亮！！

红影

这个虽然是讲飘飞的小花设置，但内容还是和军队相关的，很霸气的制作