A Secluded Path

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/7/yr.jpg') no-repeat center/cover; color: lightgreen; }
   
4.     .player { width: 480px; left: 20px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .pd-vid { left: 0;top: 50%; width: 50%; height: 50%; opacity: 0.5; mix-blend-mode: screen; }
   
7.     #msvg { position: absolute; top: 15%; width: 12vw; height: 12vw; }
   
8. </style>
   
9. 
   
10. <div id="pa" class="pa">
    
11.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" autoplay loop muted></video>
    
12.     <svg id="msvg"class="rot" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
    
13. </div>
    
14. 
    
15. <script>
    
16.     var options = {
    
17.         pa: '.pa',
    
18.         urls: [['https://music.163.com/song/media/outer/url?id=3417228039', '僻静小路']],
    
19.         btns: [msvg],
    
20.     };
    
21. 
    
22.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
23.         loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
24.     });
    
25. 
    
26.     function tzRun() {
    
27.         var aud = new AudPlayer(options);
    
28.         var dr = _dr(msvg);
    
29.         dr.path(dr.clover({num: 6, r: 260, gap: 1, R: 200}), 'currentColor');
    
30.     }
    
31. 
    
32.     function loadJs(url, callback) {
    
33.         var script = document.createElement('script');
    
34.         script.charset = 'utf-8';
    
35.         script.src = url;
    
36.         script.onload = function() {
    
37.             if (callback) callback();
    
38.         };
    
39.         document.head.appendChild(script);
    
40.     }
    
41. </script>

复制代码

马黑黑

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

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

马黑黑

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