马黑黑 发表于 2026-4-27 12:13

不见山

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: #000 url('https://638183.freep.cn/638183/t24/6/q.jpeg') no-repeat center/cover; }
#mysvg { bottom: 40px; width: 150px; height: 150px; border-radius: 50%; }
.bgprog { bottom: 20px;color: lightgreen; }
.btnFs { right: 30px; top: 30px;color: lightgreen; }
</style>

<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2750697080" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/02/11/5b50e203daab4.mp4" autoplay loop muted></video>
<svg id="mysvg" viewBox="-100 -100 200 200">
    <title>Alt+X</title>
        <g id="g1" class="player rot"></g>
</svg>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

function tzRun() {
    var dr = _dr(mysvg);
    dr.gradient(
      'linearGradient',
      {id: 'grd', x1: 0, x2: 0, y1: 0, y2: 1},
      [['lightgreen', 0], ['tan', .35], ['green', 0.7], ['orange', 1]]
    );
    dr.circle(0, 0, 90, 'transparent', 'url(#grd)', 6).addTo(g1);
    dr.line(8, 0, 85, 1, 'url(#grd)', 5).addTo(g1).rotates(13, 360);
    var tz = TZ('pa');
    tz.start();
}

loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
    loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
</script>

马黑黑 发表于 2026-4-27 12:14

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: #000 url('https://638183.freep.cn/638183/t24/6/q.jpeg') no-repeat center/cover; }
#mysvg { bottom: 40px; width: 150px; height: 150px; border-radius: 50%; }
.bgprog { bottom: 20px;color: lightgreen; }
.btnFs { right: 30px; top: 30px;color: lightgreen; }
</style>

<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=2750697080" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/02/11/5b50e203daab4.mp4" autoplay loop muted></video>
<svg id="mysvg" viewBox="-100 -100 200 200">
    <title>Alt+X</title>
        <g id="g1" class="player rot"></g>
</svg>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

function tzRun() {
    var dr = _dr(mysvg);
    dr.gradient(
      'linearGradient',
      {id: 'grd', x1: 0, x2: 0, y1: 0, y2: 1},
      [['lightgreen', 0], ['tan', .35], ['green', 0.7], ['orange', 1]]
    );
    dr.circle(0, 0, 90, 'transparent', 'url(#grd)', 6).addTo(g1);
    dr.line(8, 0, 85, 1, 'url(#grd)', 5).addTo(g1).rotates(13, 360);
    var tz = TZ('pa');
    tz.start();
}

loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js', function() {
    loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
</script>

马黑黑 发表于 2026-4-27 12:25

小播：使用 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

谢谢黑黑老师精彩示范，学习了！{:4_187:}

杨帆 发表于 2026-4-27 18:20

测试顺畅，效果漂亮，示范精彩{:4_180:}

红影 发表于 2026-4-27 20:34

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

马黑黑 发表于 2026-4-27 21:23

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

晚上嚎！

马黑黑 发表于 2026-4-27 21:23

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

感谢支持{:4_190:}

马黑黑 发表于 2026-4-27 21:29

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

很多东东不是忙就能忙的出来滴{:4_170:}

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

朵拉 发表于 2026-4-27 21:54

老师创意十足，学生已交作业，请您指正{:4_190:}

马黑黑 发表于 2026-4-27 22:26

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

{:4_199:}

雨季工作室 发表于 2026-4-29 10:31

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

马黑黑 发表于 2026-4-29 12:16

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

{:4_180:}

红影 发表于 2026-4-30 16:15

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

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

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

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

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

必须的

红影 发表于 2026-5-1 17:03

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

经过测试和验证，退个2米就足够了{:4_173:}

马黑黑 发表于 2026-5-1 18:29

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

节省空间了

红影 发表于 2026-5-2 15:56

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

也不用心里想象有5米了{:4_173:}

马黑黑 发表于 2026-5-4 17:17

红影 发表于 2026-5-2 15:56
也不用心里想象有5米了
酱紫就可以不受到屋子小的限制了

红影 发表于 2026-5-4 21:01

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

主要是降低标准更容易实现。
页: [1] 2
查看完整版本: 不见山