初夏（献给花潮辛勤的灌水工作者）

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
   
3.   .pa { --bg: url('https://638183.freep.cn/638183/t24/w8/iuxx.webp') no-repeat center/cover; }
   
4.   .player { width: 20vw; height: 20vw; background: url('https://638183.freep.cn/638183/small/2026/aa1.webp') no-repeat center/40%; }
   
5.   .bgprog { bottom: 20px; right: 100px; color: snow; }
   
6.   .btnFs { right: 30px; top: 30px; }
   
7. </style>
   
8. 
   
9. <div class="pa">
   
10.   <audio src="https://music.163.com/song/media/outer/url?id=412319416" autoplay loop></audio>
    
11.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2461796/00/02/04/5b4f48d40b801.mp4" autoplay loop muted></video>
    
12.   <svg id="msvg" class="player rotate" viewBox="-200 -200 400 400">
    
13.     <title>Alt+X</tltle>
    
14.   </svg>
    
15.   <div class="bgprog"></div>
    
16.   <div class="btnFs" title="F11"></div>
    
17. </div>
    
18. 
    
19. <script>
    
20.   function loadJs(url, callback) {
    
21.     var script = document.createElement('script');
    
22.     script.charset = 'utf-8';
    
23.     script.src = url;
    
24.     script.onload = function() {
    
25.       if (callback) callback();
    
26.     };
    
27.     document.head.appendChild(script);
    
28.   }
    
29.   
    
30.   function tzRun() {
    
31.     var dr = _dr(msvg);
    
32.     dr.gradient('radialGradient', {id: 'grd', cx: 0.3, cy: 0.6}, [['yellow', 0], ['green', 0.5], ['lightgreen', 1]]);
    
33.     dr.polygon(`0 -180, -80 0, 10 -10`, 'none', 'url(#grd)', 10, 'round').rotates(10, 360);
    
34. 
    
35.     var tz = TZ('pa');
    
36.     tz.start();
    
37.   }
    
38.   
    
39.   loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
    
40.     loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
41.   });
    
42. </script>

复制代码

马黑黑

小播构图使用 css+svgdr 实现：

（一）使用 CSS 给 svg 设置背景（代码04行）

        svg 是帖子代码流中的一个组成标签（用做小播），可以给它设置背景图片，将其弄成带底图的画布。CSS 选择器是 .play {}，在 12行 HTML代码中的 class 属性指明使用者。

（二）svgdr 绘制小播符合图案（代码31~33行）

        31行：实例化 svgdr 画笔并赋值给 dr，dr 就是画笔对象；
        32行：通过指令 gradient 设置径向渐变 radialGradient，指定 id="grd"，制定径向渐变的中心点坐标 cx、cy，以及 stop 属性（使用数组简化表达方式）；
        33行：使用 polygon 指令绘制多边形（这里是三角形），无填充色、使用前面设置的径向渐变做描边色、描边宽度设置为10、接头圆形，然后复制10份圆内均匀分布的旋转副本。

梦油

祝黑黑先生节日快乐！