不见山

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
   
3.   .pa { --bg: #000 url('https://638183.freep.cn/638183/t24/6/q.jpeg') no-repeat center/cover; }
   
4.   #mysvg { bottom: 40px; width: 150px; height: 150px; border-radius: 50%; }
   
5.   .bgprog { bottom: 20px;  color: lightgreen; }
   
6.   .btnFs { right: 30px; top: 30px;  color: lightgreen; }
   
7. </style>
   
8. 
   
9. <div class="pa">
   
10.   <audio src="https://music.163.com/song/media/outer/url?id=2750697080" autoplay loop></audio>
    
11.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/02/11/5b50e203daab4.mp4" autoplay loop muted></video>
    
12.   <svg id="mysvg" viewBox="-100 -100 200 200">
    
13.     <title>Alt+X</title>
    
14.           <g id="g1" class="player rot"></g>
    
15.   </svg>
    
16.   <div class="bgprog"></div>
    
17.   <div class="btnFs" title="F11"></div>
    
18. </div>
    
19. 
    
20. <script>
    
21.   function loadJs(url, callback) {
    
22.     var script = document.createElement('script');
    
23.     script.charset = 'utf-8';
    
24.     script.src = url;
    
25.     script.onload = function() {
    
26.       if (callback) callback();
    
27.     };
    
28.     document.head.appendChild(script);
    
29.   }
    
30.   
    
31.   function tzRun() {
    
32.     var dr = _dr(mysvg);
    
33.     dr.gradient(
    
34.       'linearGradient',
    
35.       {id: 'grd', x1: 0, x2: 0, y1: 0, y2: 1},
    
36.       [['lightgreen', 0], ['tan', .35], ['green', 0.7], ['orange', 1]]
    
37.     );
    
38.     dr.circle(0, 0, 90, 'transparent', 'url(#grd)', 6).addTo(g1);
    
39.     dr.line(8, 0, 85, 1, 'url(#grd)', 5).addTo(g1).rotates(13, 360);
    
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 绘制

（一）SVG基础CSS代码在第 4 行；
（二）SVG基础HTML代码在第 12~15 行；
（三）JS部分：

        1. 引入 svgdr 插件（第 45行）；
        2. 准备画笔（第 32 行）；
        3. 设置SVG线性渐变（第 33~37 行）；
        4. 绘制一个圆并加入 id="g1" 分组标签；
        5. 绘制直线、加入 g1 组标签并旋转 13 个副本。

小播以 id="g1" 的 g 标签充当，class=“player rot" 中的 player 类名告诉 tz2026.js 插件这个情况，rot 则运行关键帧动画（旋转）。这与上一帖《酬天问》有所不同，《酬天问》是整个 svg 标签充当小播。

梦江南

谢谢黑黑老师精彩示范，学习了！

杨帆

测试顺畅，效果漂亮，示范精彩