不见山

马黑黑

马黑黑

帖子代码

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 标签充当小播。

梦江南

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

杨帆

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

红影

这个小播的制作真好，和底图里的水车相互呼应，视频的运用也很忙奇妙。
欣赏黑黑好帖

马黑黑

梦江南 发表于 2026-4-27 17:28
谢谢黑黑老师精彩示范，学习了！

晚上嚎！

马黑黑

杨帆 发表于 2026-4-27 18:20
测试顺畅，效果漂亮，示范精彩

感谢支持

马黑黑

红影 发表于 2026-4-27 20:34
这个小播的制作真好，和底图里的水车相互呼应，视频的运用也很忙奇妙。
欣赏黑黑好帖

很多东东不是忙就能忙的出来滴

主要吧，灵感。比方说，《不见山》这个曲子我一听就喜欢，酱紫就决定做个帖子。俺是图盲，但找图总会吧，就去找找有山但山不能明显的图片（关键字很重要，例如：&……！@#￥%）。选中图片之后后退五米（没有五米空间的话可以假想有就行），看它缺啥，然后：一，去找恰当的视频，二，形成布局细节调整策略。酱紫就差不多了。

朵拉

老师创意十足，学生已交作业，请您指正

马黑黑

朵拉 发表于 2026-4-27 21:54
老师创意十足，学生已交作业，请您指正

雨季工作室

欣赏马黑老师精致的制作！

马黑黑

雨季工作室 发表于 2026-4-29 10:31
欣赏马黑老师精致的制作！

红影

马黑黑 发表于 2026-4-27 21:29
很多东东不是忙就能忙的出来滴

主要吧，灵感。比方说，《不见山》这个曲子我一听就喜欢，酱 ...

哈哈，真不知道那个字怎么就出来了，不过你做个帖子还要后退五米，还真够忙的

马黑黑

红影 发表于 2026-4-30 16:15
哈哈，真不知道那个字怎么就出来了，不过你做个帖子还要后退五米，还真够忙的

必须的

红影

马黑黑 发表于 2026-4-30 21:13
必须的

经过测试和验证，退个2米就足够了

马黑黑

红影 发表于 2026-5-1 17:03
经过测试和验证，退个2米就足够了

节省空间了

红影

马黑黑 发表于 2026-5-1 18:29
节省空间了

也不用心里想象有5米了

马黑黑

红影 发表于 2026-5-2 15:56
也不用心里想象有5米了

酱紫就可以不受到屋子小的限制了

红影

马黑黑 发表于 2026-5-4 17:17
酱紫就可以不受到屋子小的限制了

主要是降低标准更容易实现。