转帖马黑黑老师 [特效音画] 三人行及代码

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=94818&extra=&page=1

admin

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2026/srx.webp') no-repeat center/cover; color: lightblue; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #player2 { bottom: 8%; width: 12vw; height: 8vw; cursor: pointer; transform: rotateX(45deg);  position: absolute; }
    .ball { width: 30px; height: 30px; background: lightblue; border-radius: 55%; offset-path: ellipse(50% 33.3%); offset-distance: 0%; animation: circle 6s linear infinite var(--state); }
    .ball:nth-of-type(2) { background: tan; animation-delay: -2s; }
    .ball:nth-of-type(3) { background: teal; animation-delay: -4s; }
    @keyframes circle { to { offset-distance: 100%; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay loop muted></video>
    <div id="player2">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
</div>

<script>
    var options = {
        pa: '.pa',
        urls: [['https://music.163.com/song/media/outer/url?id=3389281646', '三人行']],
        btns: [player2],
    };

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

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

    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>

admin

辅助小播：

        #player2 选择器（代码06行）对应的 div 元素（代码15~19行）带 3 个子元素，class="ball"。这 3 个子元素运行 circle 关键帧动画，有时间差，因此分布在椭圆圆周不同的位置。动画是相抵路径动画，offset-path 已经支持 SVG 形状（圆、矩形等），还有射线（ray）。容器元素在X轴做一些倾斜，以适配视频图案。