关山（tzMaker中级教程二配套帖）

马黑黑 · 发表于 2025-11-9 19:18

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-11-9 19:24

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa {
--offsetX: 81px;
--bg: url('https://638183.freep.cn/638183/t24/6/gruj.jpg') no-repeat center/cover;
}
.gRot { animation: rotate 8s linear infinite var(--state); }
#msvg { position: absolute; bottom: 20px; }
</style>
<div class="pa">
<svg id="msvg" width="150" height="150" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
<g stroke="lightyellow" stroke-width="10">
<ellipse id="track" cx="0" cy="0" rx="95" ry="85" fill="none" />
<ellipse id="prog" cx="0" cy="0" rx="95" ry="85" fill="none" stroke="darkorange" />
</g>
</svg>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js?v0';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1964981429'
});
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/7165162/00/20/20/5f20f36d9ecbc.mp4',
style: 'opacity: 0.3;'
});
tz.svgsonsRot(4, 'msvg', 'path', {
d: 'M0 0 C-100 100,100 100,0 0',
fill: 'gold'
}).playmp3();
tz.svgprog('msvg', 'track', 'prog');
</script>

复制代码

如果需要全屏按钮，在JS代码中加入： tz.fs().style('top: 20px; right: 20px; color: yellow');

马黑黑 · 发表于 2025-11-9 19:31

帖子的SVG以显性方式直接放在帖子容器代码内，并安排了进度条所用到的两个圆环，然后在JS中使用指令 tz.svgprog() 将它们设置为进度条；

小播使用指令 svgsonsRot() 做成，该指令会生成 num 个在 svg 里的 tag，并依次旋转 tag，令它们构成复合图案。代码在 34 ~ 37 行。指令生成的SVG代码将插入到 class="gRot" 的 <g> 分组标签里，该标签如果手工书写，应写在进度条 g 标签的前面（模块自动写在前面）。