[特效音画] 短兵相接（有代码） 转自马黑作品

admin

admin

<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>