梦江南 发表于 2026-8-5 11:46

云水禅心--空灵鼓，（学习黑黑老师江上清风游代码）

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; color: yellow; }
    .pa::before, .pa::after { position: absolute; content: ''; inset: 0; background: url('https://pan.suyanw.cn/view.php/08585435a3969ebef046cc50d93f63de.jpg') no-repeat center/cover; z-index: -2; }
    .pa::before { background-position: var(--begin1) 0; }
    .pa::after {
      transform: scale(-1, 1);
      background-position: var(--begin2) 0;
    }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #mpic { width: 160px; bottom: 50px; }
</style>

<div id="pa" class="pa">
    <img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
    <video class="pd-vid" src="https://pan.suyanw.cn/view.php/6bffc0e5916245c6988542c06ca7a81e.mp4" autoplay loop muted></video>
   
</div>

<script>
    var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;
   
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=1423800860', '云水禅心-空灵鼓']],
      btns: ,
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      
      function bgMove() {
            var ww = aud.pa.offsetWidth;
            function moving() {
                cancelAnimationFrame(raf);
                begin1 += speed;
                if (speed > 0) {
                  if (begin1 >= ww) begin1 = -ww;
                } else {
                  if(begin1 <= -ww) begin1 = ww;
                }
                begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
                aud.pa.style.setProperty('--begin1', begin1 + 'px');
                aud.pa.style.setProperty('--begin2', begin2 + 'px');
                aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
            }
            moving();
      }
      
      aud.aud.onpause = () => bgMove();
      aud.aud.onplaying = () => bgMove();
      window.onresize = () => bgMove();
    }

    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-5 11:49

沙发{:4_174:}

玫瑰 发表于 2026-8-5 11:49

今天好日子，都是沙发

玫瑰 发表于 2026-8-5 11:50

{:4_204:}{:4_204:}{:4_204:}

玫瑰 发表于 2026-8-5 11:50

美妙的旋律

玫瑰 发表于 2026-8-5 11:50

制作精美好看{:4_204:}

梦江南 发表于 2026-8-5 11:55

玫瑰 发表于 2026-8-5 11:49
沙发

欢迎你玫瑰{:4_187:}

梦江南 发表于 2026-8-5 11:56

玫瑰 发表于 2026-8-5 11:49
今天好日子，都是沙发

今天你运气好，无巧不成书啊1{:4_204:}

梦江南 发表于 2026-8-5 11:57

玫瑰 发表于 2026-8-5 11:50


谢谢玫瑰花花{:4_180:}

梦江南 发表于 2026-8-5 11:58

玫瑰 发表于 2026-8-5 11:50
美妙的旋律

谢谢聆听{:4_171:}

梦江南 发表于 2026-8-5 11:59

玫瑰 发表于 2026-8-5 11:50
制作精美好看

你中饭吃了吗？

玫瑰 发表于 2026-8-5 12:02

梦江南 发表于 2026-8-5 11:59
你中饭吃了吗？

吃过，吃瘦肉青菜汤面。{:4_204:}

玫瑰 发表于 2026-8-5 12:03

梦江南 发表于 2026-8-5 11:59
你中饭吃了吗？

你吃午饭了吗？{:4_204:}

玫瑰 发表于 2026-8-5 12:03

风景如画，美美美{:4_204:}

梦江南 发表于 2026-8-5 12:13

玫瑰 发表于 2026-8-5 12:02
吃过，吃瘦肉青菜汤面。

吃过了就好，午睡吗？

梦江南 发表于 2026-8-5 12:14

玫瑰 发表于 2026-8-5 12:03
你吃午饭了吗？

吃了，差不多要午睡了。{:4_204:}

梦江南 发表于 2026-8-5 12:15

玫瑰 发表于 2026-8-5 12:03
风景如画，美美美

谢谢欣赏{:4_171:}

杨帆 发表于 2026-8-5 14:50

赏心悦目的佳作，谢谢江南精彩分享{:4_204:}

梦江南 发表于 2026-8-5 16:10

杨帆 发表于 2026-8-5 14:50
赏心悦目的佳作，谢谢江南精彩分享

问好杨帆，谢谢欣赏支持，祝夏安！{:4_204:}

红影 发表于 2026-8-5 16:23

仙气飘飘的制作，真美啊。这图图制作漂亮，头尾衔接处那么浑然天成，太美了{:4_187:}
欣赏江南好帖{:4_187:}
页: [1] 2
查看完整版本: 云水禅心--空灵鼓，（学习黑黑老师江上清风游代码）