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

银河轨道

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/yhgd.webp') 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:05

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/yhgd.webp') 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:27

不知什么原因，我这看到的背景是静图呀

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

杨帆 发表于 2026-8-8 13:27
不知什么原因，我这看到的背景是静图呀

帖子背景不动，静止状态。小球做椭圆轨道运动并做3d Z轴上的位置转换。

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

精彩的分享，音乐动感！{:4_171:}

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

来个同题学习

杨帆 发表于 2026-8-8 13:37

马黑黑 发表于 2026-8-8 13:30
帖子背景不动，静止状态。小球做椭圆轨道运动并做3d Z轴上的位置转换。

哇~设计初衷是这样的呀，谢谢马老师精彩示范{:4_180:}

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

震撼！{:4_187:}

霜染枫丹 发表于 2026-8-8 15:07

这个马老师下午好！很别出心裁的设计，创意恢宏，步骤很精细，赞佩！！{:4_204:}{:4_190:}

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

漂亮，宇宙深处的漂亮的小球。欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-8-8 22:14

杨帆 发表于 2026-8-8 13:37
哇~设计初衷是这样的呀，谢谢马老师精彩示范

不是所有的帖子都得懂背景吧

马黑黑 发表于 2026-8-8 22:14

霜染枫丹 发表于 2026-8-8 15:07
这个马老师下午好！很别出心裁的设计，创意恢宏，步骤很精细，赞佩！！

感谢支持

马黑黑 发表于 2026-8-8 22:14

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

{:4_191:}

马黑黑 发表于 2026-8-8 22:15

玫瑰 发表于 2026-8-8 13:32
精彩的分享，音乐动感！

音频比较独特

马黑黑 发表于 2026-8-8 22:15

梦江南 发表于 2026-8-8 14:41
震撼！

{:4_190:}

马黑黑 发表于 2026-8-8 22:15

红影 发表于 2026-8-8 21:28
漂亮，宇宙深处的漂亮的小球。欣赏黑黑好帖

晚上嚎

杨帆 发表于 2026-8-9 00:13

马黑黑 发表于 2026-8-8 22:14
不是所有的帖子都得懂背景吧

是的，效果至上，因帖制宜，打破定势

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

马黑黑 发表于 2026-8-8 22:15
晚上嚎

上午好{:4_187:}

马黑黑 发表于 2026-8-9 12:03

红影 发表于 2026-8-9 10:05
上午好

中午嚎

马黑黑 发表于 2026-8-9 12:19

杨帆 发表于 2026-8-9 00:13
是的，效果至上，因帖制宜，打破定势

{:4_190:}
页: [1] 2
查看完整版本: 银河轨道