莲池夜月

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
   
3.   .pa { --bg: #000 url('https://638183.freep.cn/638183/t24/w8/lmii.webp') no-repeat center/cover; }
   
4.   .pd-vid { opacity: 1; }
   
5.   .bgprog { bottom: 20px;  color: lightgreen; }
   
6.   .btnFs { right: 30px; top: 30px;  color: lightgreen; }
   
7.   .player { top: 30px; width: 20vw; height: 20vw; }
   
8.   #sb { transform-origin: 25px 25px; }
   
9. </style>
   
10. 
    
11. <div class="pa">
    
12.   <audio src="https://music.163.com/song/media/outer/url?id=1997298668" autoplay loop></audio>
    
13.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e593f4b8ab37.mp4" autoplay loop muted></video>
    
14.   <svg id="msvg" class="player rot" viewBox="-100 -100 200 200">
    
15.     <title>Alt+X</title>
    
16.     <symbol id="sb" class="rot" viewBox="-100 -100 200 200"></symbol>
    
17.   </svg>
    
18.   <div class="bgprog"></div>
    
19.   <div class="btnFs" title="F11"></div>
    
20. </div>
    
21. 
    
22. <script>
    
23.   function loadJs(url, callback) {
    
24.     var script = document.createElement('script');
    
25.     script.charset = 'utf-8';
    
26.     script.src = url;
    
27.     script.onload = function() {
    
28.       if (callback) callback();
    
29.     };
    
30.     document.head.appendChild(script);
    
31.   }
    
32.   
    
33.   function tzRun() {
    
34.     var dr = _dr('msvg');
    
35.     dr.circle(0, 0, 90, 'white').addTo(sb);
    
36.     dr.path('M0 0, 100 0', 'none','darkgreen', 4).addTo(sb).rotates(20, 360);
    
37.     dr.use('#sb',30, 30, 50, 50).rotates(7);
    
38.     dr.use('#sb', -25, -25, 50, 50).style('transform: scale(1.5)');
    
39.    
    
40.     var tz = TZ('pa');
    
41.     tz.start();
    
42.   }
    
43.   
    
44.   loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
    
45.     loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
46.   });
    
47. </script>

复制代码

杨帆

富有新意的小播，谢谢马老师精彩示范

马黑黑

小播：

使用 svgdr 绘制。

（一）CSS 和 HTML配套设置：

        07行：播放器CSS样式，针对整个 svg 标签（对标 14行 HTML 代码 class 属性）；
        08行：.sb {} 选择器针对 svg 标签里的子元素 symbol 标，symbol 标签绘制符合图案。其中的 transform-origin 属性设置依据的是 symbol 标签的 viewBox 属性（16行）和它被 use 实例化后的宽高尺寸（37、38行）。

（二）svgdr 绘制过程

        其一，画一个圆（35行）并将其加到 symbol 标签；
        其二：画一条直线（36行）并加入到 symbol 标签，再复制20份圆内旋转副本；
        其三：使用 use 标签实例化 symbol 图案（37行），复制7份圆内旋转副本，这是绕圈圈的7个复合图案；
        其四：在 use 实例化一个 symbol 图案（38行），依据宽高调整 use 的 x、y 值令其居中，随后将其放大 1.5 倍。

梦江南

欣赏黑黑老师用 svgdr 绘制的漂亮小播。赞！

红影

这些小花伞有自转，还有公转，真漂亮