莲池夜月

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

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

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: #000 url('https://638183.freep.cn/638183/t24/w8/lmii.webp') no-repeat center/cover; }
.pd-vid { opacity: 1; }
.bgprog { bottom: 20px;color: lightgreen; }
.btnFs { right: 30px; top: 30px;color: lightgreen; }
.player { top: 30px; width: 20vw; height: 20vw; }
#sb { transform-origin: 25px 25px; }
</style>

<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1997298668" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e593f4b8ab37.mp4" autoplay loop muted></video>
<svg id="msvg" class="player rot" viewBox="-100 -100 200 200">
<title>Alt+X</title>
<symbol id="sb" class="rot" viewBox="-100 -100 200 200"></symbol>
</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('msvg');
dr.circle(0, 0, 90, 'white').addTo(sb);
dr.path('M0 0, 100 0', 'none','darkgreen', 4).addTo(sb).rotates(20, 360);
dr.use('#sb',30, 30, 50, 50).rotates(7);
dr.use('#sb', -25, -25, 50, 50).style('transform: scale(1.5)');

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-29 12:33

富有新意的小播，谢谢马老师精彩示范{:4_191:}

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

小播：

使用 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 倍。

梦江南 发表于 2026-4-29 16:03

欣赏黑黑老师用 svgdr 绘制的漂亮小播。赞！{:4_187:}

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

这些小花伞有自转，还有公转，真漂亮{:4_199:}

马黑黑 发表于 2026-4-29 19:49

红影发表于 2026-4-29 16:15
这些小花伞有自转，还有公转，真漂亮

小阀门变花伞，这也太善变了{:4_170:}

马黑黑 发表于 2026-4-29 19:50

梦江南发表于 2026-4-29 16:03
欣赏黑黑老师用 svgdr 绘制的漂亮小播。赞！

不知道 svgdr 难不难？当初开发它是为了简化 svg 绘图方式，可能封装的不好。

马黑黑 发表于 2026-4-29 19:51

杨帆发表于 2026-4-29 12:33
富有新意的小播，谢谢马老师精彩示范

svg 和 canvas 都是 HTML 的得力助手，其中，svg 是自成一体的，可以独立于 HTML。

杨帆发表于 2026-4-29 21:25

马黑黑发表于 2026-4-29 19:51
svg 和 canvas 都是 HTML 的得力助手，其中，svg 是自成一体的，可以独立于 HTML。
是，svg 和 canvas 的知识与运用知道的还很少呢，谢谢老师指导{:4_180:}

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

杨帆发表于 2026-4-29 21:25
是，svg 和 canvas 的知识与运用知道的还很少呢，谢谢老师指导

这两个分支，一个是独立分支，另一个是挂载分支，都是需要学习成本的

小辣椒 发表于 2026-4-29 23:37

这个小播很像杂技团顶盘的旋转{:4_189:}

小辣椒 发表于 2026-4-29 23:37

感谢黑黑源码分享{:4_187:}

马黑黑 发表于 2026-4-29 23:50

小辣椒发表于 2026-4-29 23:37
这个小播很像杂技团顶盘的旋转

我就是看杂技表演的时候得到的启发

马黑黑 发表于 2026-4-29 23:50

小辣椒发表于 2026-4-29 23:37
感谢黑黑源码分享

{:4_180:}

杨帆发表于 2026-4-30 09:55

马黑黑发表于 2026-4-29 21:33
这两个分支，一个是独立分支，另一个是挂载分支，都是需要学习成本的

是，付出学习成本是必须的，谢谢老师指导{:4_180:}

红影发表于 2026-4-30 19:22

马黑黑发表于 2026-4-29 19:49
小阀门变花伞，这也太善变了

是的啊，这些小花伞和小阀门是不一样的，黑黑厉害，随手一调就变化了。

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

红影发表于 2026-4-30 19:22
是的啊，这些小花伞和小阀门是不一样的，黑黑厉害，随手一调就变化了。

还好还好

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

杨帆发表于 2026-4-30 09:55
是，付出学习成本是必须的，谢谢老师指导

{:4_190:}

红影发表于 2026-5-1 16:47

马黑黑发表于 2026-4-30 21:07
还好还好

而且想要什么就是什么，很多简单图形绕圆环一排列，就会变很漂亮。

页: [1] 2

花潮论坛's Archiver

莲池夜月