东方神韵精选（三）转自马黑黑博客附代码

admin

马黑黑博客：https://mahei.ccccocccc.cc/art/?st=0&id=1781098127

admin

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/uy.webp') no-repeat center/cover; color: yellow; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { bottom: 25px; left: 20px; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; bottom: 20px; right: 20px; opacity: 1; cursor: pointer; }
    #msvg path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2s var(--delay) forwards, fill 0.75s calc(var(--delay) + 2s) forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes fill { to {fill: url(#grd); } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/79/71/60c86235ea083.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
        <title>播放/暂停(Alt+X)</title>
        <defs>
                    <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
                            <stop offset="0%" stop-color="red"></stop>
                            <stop offset="50%" stop-color="orange"></stop>
                            <stop offset="100%" stop-color="darkred"></stop>
                    </linearGradient>
            </defs>
            <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
        pa: '.pa',
        urls: [
            ['https://music.163.com/song/media/outer/url?id=5275066', '夕阳山外山-扬琴/二胡'],
            ['https://music.163.com/song/media/outer/url?id=5275067', '晨曲-洞萧/二胡'],
            ['https://music.163.com/song/media/outer/url?id=5275068', '遥想-排萧/二胡'],
            ['https://music.163.com/song/media/outer/url?id=5275069', '秋-二胡/古筝'],
            ['https://music.163.com/song/media/outer/url?id=5275070', '檐下雨意-女声/二胡'],
            ['https://music.163.com/song/media/outer/url?id=5275071', '一叶轻舟-二胡/扬琴'],
            ['https://music.163.com/song/media/outer/url?id=5275072', '蔓延-女声/排萧'],
            ['https://music.163.com/song/media/outer/url?id=5275073', '静卧琴声里-埙']
        ],
        btns: [msvg]
    };

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

    function tzRun() {
        var aud = new AudPlayer(options);

        var dr = _dr(msvg);
        dr.path('M0 0 Q80 -180,-50 -190 Q0 -70,50 -190 Q-80 -180, 0 0', 'transparent', 'yellow', 3).addTo(g1).rotates(5);
        setProperties();

        function setProperties() {
            const paths = msvg.querySelectorAll('path');
            paths.forEach((path, idx) => {
                path.style.cssText += `
                    --len: ${path.getTotalLength()};
                    --delay: ${idx * 2.75}s;
                `;
            });
            paths[paths.length - 1].onanimationend = () => {
                setTimeout(() => { g1.classList.add('rotate'); }, 750);
            };
        }
    }

    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>