淡墨疏影 发表于 2026-8-16 23:45

祝天下有情人七夕快乐 套用马老师代码制作

本帖最后由 淡墨疏影 于 2026-8-17 00:00 编辑 <br /><br /><style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/08/16/6a81d40d5f348.gif') no-repeat center/cover; color: lightblue; perspective: 1000px; }
    .son { position: absolute; inset: 0; transform-style: preserve-3d; }
    .player { width: 680px; bottom: 10px; }
    .btnFs { top: 100px; right: 60px; }
    /* 关键修改：offset-rotate: 0deg 固定直立，不再跟随路径旋转 */
    .mpic { width: 300px; height: 300px; offset-path:path("M700,350 C700,300 480,200 420,280 C360,360 360,360 500,680 C840,560 840,360 680,280 C620,200 600,140 600,450 Z"); 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;offset-rotate: 0deg;}
    .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://ff.xiaoqiaodali.top:5401/i/2026/08/09/6a7826bfbb2d5.png" alt="" />
      <img class="mpic" src="https://ff.xiaoqiaodali.top:5401/i/2026/08/16/6a81cc2f4799b.png" alt="" />
      <img class="mpic" src="https://ff.xiaoqiaodali.top:5401/i/2026/08/16/6a81cbf02eeaf.png" alt="" />
      <img class="mpic" src="https://ff.xiaoqiaodali.top:5401/i/2026/08/09/6a78313f9c9e8.png" alt="" />
      <img class="mpic" src="https://ff.xiaoqiaodali.top:5401/i/2026/08/09/6a7826236e17a.png" alt="" />
    </div>
</div>

<script>
    var pics = document.querySelectorAll('.mpic');
    var options = {
      pa: '.pa',
      urls: [['https://imgimg.qqdsw8.cn/view.php/8fb7fa497802c1c99e2c1502ac9175f9.mp3']],
      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-16 23:53

我是霜染枫丹，淡墨疏影是我帮朋友注册的一个ID,他经过这些天的学习，感到有压力，现在决定退出，请我销号。我觉得挺好听的名字，就留着吧。{:4_173:}

红影 发表于 2026-8-17 14:25

原来是枫丹，这制作真好。
七夕马上要到了，这个帖子真美啊{:4_199:}

梦江南 发表于 2026-8-17 14:52

原来是版主啊，这个网名很好听。
漂亮制作，欣赏点赞！{:4_204:}

夕阳黄昏 发表于 2026-8-17 15:03

欣赏美帖， 赞！

霜染枫丹 发表于 2026-8-17 17:38

红影 发表于 2026-8-17 14:25
原来是枫丹，这制作真好。
七夕马上要到了，这个帖子真美啊

谢红影支持！我帮2位老同学在这里注册，第一名看了一天说学不会了。这一位看了2个月，也决定放弃了。ID名字是他自己起得，我觉得名字挺好听，就说我改个密码做我的马甲吧。我就没马甲，就是挺喜欢这个名字的。{:4_173:}{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-8-17 17:42

梦江南 发表于 2026-8-17 14:52
原来是版主啊，这个网名很好听。
漂亮制作，欣赏点赞！

哈哈~~我同学说本来他还想看帖子，可孩子总要手机看这里的帖子，就决定退出来了。{:4_173:}感谢梦江南的支持，本来想把图片都做成动图，效果会更好一点。玩的太晚了，就这样贴上来了。{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-8-17 17:43

夕阳黄昏 发表于 2026-8-17 15:03
欣赏美帖， 赞！

夕阳黄昏下午好~~

感谢您的支持鼓励，祝您吉祥！{:4_204:}{:4_190:}

玫瑰 发表于 2026-8-17 20:12

祝福大家七夕快乐 {:4_204:}
页: [1]
查看完整版本: 祝天下有情人七夕快乐 套用马老师代码制作