玫瑰 发表于 2026-8-8 13:20

银河轨道

本帖最后由 玫瑰 于 2026-8-8 13:32 编辑 <br /><br />
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://img.wyc520.com.cn/data/attachment/forum/202608/07/202958bdk6r232qra0w0q4.jpg') no-repeat center/cover; color: lightblue; perspective: 1000px; }
    .son { position: absolute; inset: 0; transform-style: preserve-3d; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .mpic { width: 128px; height: 128px; offset-path: ellipse(30% 20% at 50% 30%); cursor: pointer; filter: drop-shadow(2px 2px 30px white); animation: offset-distance 15s linear var(--delay) infinite var(--state), move 200s linear infinite alternate var(--state);--delay: 0s; }
    .mpic:nth-of-type(2) { --delay: -3s; }
    .mpic:nth-of-type(3) { --delay: -6s; }
    .mpic:nth-of-type(4) { --delay: -9s; }
    .mpic:nth-of-type(5) { --delay: -12s; }
    @keyframes move {
      from { transform: translateZ(-3000px); }
      to { transform: translateZ(0); }
    }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/02/01/5b4eedab469ff.mp4" autoplay loop muted></video>
    <div class="son">
      <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b1.webp" alt="" />
      <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b2.webp" alt="" />
      <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b3.webp" alt="" />
      <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b4.webp" alt="" />
      <img class="mpic" src="https://638183.freep.cn/638183/small/2025/b5.webp" alt="" />
    </div>
</div>

<script>
    var pics = document.querySelectorAll('.mpic');
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=417247510', '银河轨道']],
      btns: [...pics],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v1', 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>




玫瑰 发表于 2026-8-8 13:21

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

马黑黑 发表于 2026-8-8 13:26

精彩！

玫瑰 发表于 2026-8-8 13:27

本帖最后由 玫瑰 于 2026-8-8 20:13 编辑

马黑黑 发表于 2026-8-8 13:26
精彩！
我这下学习可快了{:4_170:}

玫瑰 发表于 2026-8-8 13:28

马黑黑 发表于 2026-8-8 13:26
精彩！

多谢鼓励点评，学习开心。{:4_171:}

马黑黑 发表于 2026-8-8 13:28

玫瑰 发表于 2026-8-8 13:27
我下学习可快了

{:4_191:}

玫瑰 发表于 2026-8-8 13:29

马黑黑 发表于 2026-8-8 13:26
精彩！

你代码精彩！

玫瑰 发表于 2026-8-8 13:29

马黑黑 发表于 2026-8-8 13:26
精彩！

音乐有了代码到手，谢谢分享。

马黑黑 发表于 2026-8-8 13:31

玫瑰 发表于 2026-8-8 13:29
音乐有了代码到手，谢谢分享。

不客气

马黑黑 发表于 2026-8-8 13:32

玫瑰 发表于 2026-8-8 13:29
你代码精彩！

哪里哪里

玫瑰 发表于 2026-8-8 13:33

马黑黑 发表于 2026-8-8 13:32
哪里哪里

学习学习

玫瑰 发表于 2026-8-8 13:34

来个同题学习

梦江南 发表于 2026-8-8 14:39

玫瑰 发表于 2026-8-8 13:34
来个同题学习

玫瑰厉害！{:4_199:}

霜染枫丹 发表于 2026-8-8 14:40

精彩制作，震撼效果！{:4_204:}{:4_190:}

玫瑰 发表于 2026-8-8 20:14

梦江南 发表于 2026-8-8 14:39
玫瑰厉害！

马黑黑特效精彩，谢谢鼓励点评。{:4_204:}

玫瑰 发表于 2026-8-8 20:15

霜染枫丹 发表于 2026-8-8 14:40
精彩制作，震撼效果！

问好枫丹，分享聆听。{:4_171:}

红影 发表于 2026-8-8 21:31

很漂亮的制作，欣赏玫瑰好帖{:4_199:}

玫瑰 发表于 2026-8-8 22:00

红影 发表于 2026-8-8 21:31
很漂亮的制作，欣赏玫瑰好帖

红影晚上好，分享聆听。{:4_204:}

红影 发表于 2026-8-9 10:04

玫瑰 发表于 2026-8-8 22:00
红影晚上好，分享聆听。

问好玫瑰，上午好{:4_187:}

小辣椒 发表于 2026-8-9 21:47

玫瑰学习的不错，速度挺快的，{:4_199:}
页: [1]
查看完整版本: 银河轨道