论坛 › 动画音画 › 短兵相接

马黑黑 发表于 2026-8-1 10:03

短兵相接

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/dbxj.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .mpic { width: 50px; offset-anchor: 100% 50%; animation: offset-distance 3s linear infinite alternate var(--state), rot 3s linear infinite var(--state); }
</style>

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

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1371760676', '短兵相接']],
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      
      const frg = new DocumentFragment(), num = 20;
      for (let i = 0; i <= num; i ++) {
            const img = document.createElement('img');
            img.src = 'https://638183.freep.cn/638183/web/svg/clover4.svg';
            img.alt = '';
            img.className = 'mpic';
            img.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
            img.style.offsetPath = `ray(${180 / num * i - 90}deg sides at 50% 95%)`;
            img.style.animationDuration = `${Math.random() * 8 + 8}s`;
            img.style.animationDelay = `${-10 * Math.random()}s`;
            frg.appendChild(img);
      }
      pa.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-8-1 10:04

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/dbxj.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .mpic { width: 50px; offset-anchor: 100% 50%; animation: offset-distance 3s linear infinite alternate var(--state), rot 3s linear infinite var(--state); }
</style>

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

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1371760676', '短兵相接']],
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      
      const frg = new DocumentFragment(), num = 20;
      for (let i = 0; i <= num; i ++) {
            const img = document.createElement('img');
            img.src = 'https://638183.freep.cn/638183/web/svg/clover4.svg';
            img.alt = '';
            img.className = 'mpic';
            img.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
            img.style.offsetPath = `ray(${180 / num * i - 90}deg sides at 50% 95%)`;
            img.style.animationDuration = `${Math.random() * 8 + 8}s`;
            img.style.animationDelay = `${-10 * Math.random()}s`;
            frg.appendChild(img);
      }
      pa.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-8-1 10:10

CSS特效：

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

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

马黑黑 发表于 2026-8-1 10:13

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

小文 发表于 2026-8-1 10:40

太棒了，问好先生！

梦江南 发表于 2026-8-1 11:51

这些飘下来的小花是用路径来实现的，太棒了！{:4_187:}

梦江南 发表于 2026-8-1 12:00

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

霜染枫丹 发表于 2026-8-1 12:04

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

红影 发表于 2026-8-1 12:39

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

小辣椒 发表于 2026-8-1 13:12

黑黑，这个小花用子弹头多好，坦克直接射出去，记得以前你做过一个用抢射击的那个代码，我是最喜欢了{:4_170:}

马黑黑 发表于 2026-8-1 15:14

小辣椒 发表于 2026-8-1 13:12
黑黑，这个小花用子弹头多好，坦克直接射出去，记得以前你做过一个用抢射击的那个代码，我是最喜欢了{:4_17 ...

子弹已经射出去，正在远处爆炸呢。

战争也有温馨的高光时刻，比如，因空气动力学原理导致的落花纷飞，这一场景可能持续的时间更长，也更能烘托出战争的诉求。

马黑黑 发表于 2026-8-1 21:51

红影 发表于 2026-8-1 12:39
这个虽然是讲飘飞的小花设置，但内容还是和军队相关的，很霸气的制作

感谢支持

马黑黑 发表于 2026-8-1 21:51

霜染枫丹 发表于 2026-8-1 12:04
马老师中午好！
天女散花的短兵相接，音乐的急促和画面的美轮美奂形成气势恢宏的效果，漂亮！！{:4_178: ...

感谢支持！晚上嚎

马黑黑 发表于 2026-8-1 21:52

梦江南 发表于 2026-8-1 12:00
黑黑老师，没分了，不好意思。

分不分的没啥

马黑黑 发表于 2026-8-1 21:52

梦江南 发表于 2026-8-1 11:51
这些飘下来的小花是用路径来实现的，太棒了！

晚上嚎

马黑黑 发表于 2026-8-1 21:52

小文 发表于 2026-8-1 10:40
太棒了，问好先生！

{:4_191:}

杨帆 发表于 2026-8-1 21:54

ray() 函数动态生成的射线相抵路径应用典范，谢谢马老师精彩示范{:4_190:}

偶然~ 发表于 2026-8-1 21:56

五星闪烁正义光，
八一赤旗迎风展。
身着绿装威武兵，
精良装备慑敌颤。
华夏金盾胆敢碰，
犯我豺狼泥一团。
党指挥枪卫和平，
精将雄师守金安。

偶然~ 发表于 2026-8-1 21:57

{:4_199:} 来欣赏马老师精品佳作

霜染枫丹 发表于 2026-8-1 21:57

马黑黑 发表于 2026-8-1 21:51
感谢支持！晚上嚎

马老师晚上好！这个形式是我第一次看到，基本敢说我溜达了全网的音画，知道很多人的作品，都没有人这样的代码，不添加任何水分的佩服！！我抱走了。可以演绎出来很多样式！谢谢马老师！
https://ff.xiaoqiaodali.top:5401/i/2025/07/28/68873ce52181e.gif

查看完整版本: 短兵相接