马黑黑 发表于 2026-8-20 12:51

A Secluded Path

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/yr.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; left: 20px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { left: 0;top: 50%; width: 50%; height: 50%; opacity: 0.5; mix-blend-mode: screen; }
    #msvg { position: absolute; top: 15%; width: 12vw; height: 12vw; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" autoplay loop muted></video>
    <svg id="msvg"class="rot" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3417228039', '僻静小路']],
      btns: ,
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      dr.path(dr.clover({num: 6, r: 260, gap: 1, R: 200}), 'currentColor');
    }

    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-20 12:52

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/yr.jpg') no-repeat center/cover; color: lightgreen; }
    .player { width: 480px; left: 20px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { left: 0;top: 50%; width: 50%; height: 50%; opacity: 0.5; mix-blend-mode: screen; }
    #msvg { position: absolute; top: 15%; width: 12vw; height: 12vw; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" autoplay loop muted></video>
    <svg id="msvg"class="rot" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3417228039', '僻静小路']],
      btns: ,
    };

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

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      dr.path(dr.clover({num: 6, r: 260, gap: 1, R: 200}), 'currentColor');
    }

    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-20 12:55

视频尺寸是帖子容器的1/4，放置在左下。适用于能隐去背景的视频。

六叶草使用svgdr 的 clover 指令绘制，代码在第 29 行。

马黑黑 发表于 2026-8-20 12:57

辅助小播六叶草之所以如此定位，主要依据是哪个位置的枯枝比较明显

霜染枫丹 发表于 2026-8-20 22:05

马老师晚上好~~

六叶草很漂亮，选择了绿色，放到什么位置都请新，喜欢这套代码。感谢马老师分享！恭祝秋安~~{:4_204:}{:4_190:}

马黑黑 发表于 2026-8-21 12:49

霜染枫丹 发表于 2026-8-20 22:05
马老师晚上好~~

六叶草很漂亮，选择了绿色，放到什么位置都请新，喜欢这套代码。感谢马老师分享！恭祝秋 ...

{:4_190:}

小辣椒 发表于 2026-8-26 21:00

这个视频尺寸裁剪到只有4分之一了，这样以后玩岁月的视频可以用了{:4_205:}

马黑黑 发表于 2026-8-26 21:43

小辣椒 发表于 2026-8-26 21:00
这个视频尺寸裁剪到只有4分之一了，这样以后玩岁月的视频可以用了

视频和图片一样，都可以控制大小。用作辅助背景的，视频不是全宽高时，最好背景可以通过 mix-blend-mode 或其他方式隐去。岁月的视频作品基本都是黑底，符合条件
页: [1]
查看完整版本: A Secluded Path