初夏（献给花潮辛勤的灌水工作者）
<style>@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/iuxx.webp') no-repeat center/cover; }
.player { width: 20vw; height: 20vw; background: url('https://638183.freep.cn/638183/small/2026/aa1.webp') no-repeat center/40%; }
.bgprog { bottom: 20px; right: 100px; color: snow; }
.btnFs { right: 30px; top: 30px; }
</style>
<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=412319416" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2461796/00/02/04/5b4f48d40b801.mp4" autoplay loop muted></video>
<svg id="msvg" class="player rotate" viewBox="-200 -200 400 400">
<title>Alt+X</tltle>
</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.gradient('radialGradient', {id: 'grd', cx: 0.3, cy: 0.6}, [['yellow', 0], ['green', 0.5], ['lightgreen', 1]]);
dr.polygon(`0 -180, -80 0, 10 -10`, 'none', 'url(#grd)', 10, 'round').rotates(10, 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> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/iuxx.webp') no-repeat center/cover; }
.player { width: 20vw; height: 20vw; background: url('https://638183.freep.cn/638183/small/2026/aa1.webp') no-repeat center/40%; }
.bgprog { bottom: 20px; right: 100px; color: snow; }
.btnFs { right: 30px; top: 30px; }
</style>
<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=412319416" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2461796/00/02/04/5b4f48d40b801.mp4" autoplay loop muted></video>
<svg id="msvg" class="player rotate" viewBox="-200 -200 400 400">
<title>Alt+X</tltle>
</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.gradient('radialGradient', {id: 'grd', cx: 0.3, cy: 0.6}, [['yellow', 0], ['green', 0.5], ['lightgreen', 1]]);
dr.polygon(`0 -180, -80 0, 10 -10`, 'none', 'url(#grd)', 10, 'round').rotates(10, 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>
小播构图使用 css+svgdr 实现：
（一）使用 CSS 给 svg 设置背景（代码04行）
svg 是帖子代码流中的一个组成标签（用做小播），可以给它设置背景图片，将其弄成带底图的画布。CSS 选择器是 .play {}，在 12行 HTML代码中的 class 属性指明使用者。
（二）svgdr 绘制小播符合图案（代码31~33行）
31行：实例化 svgdr 画笔并赋值给 dr，dr 就是画笔对象；
32行：通过指令 gradient 设置径向渐变 radialGradient，指定 id="grd"，制定径向渐变的中心点坐标 cx、cy，以及 stop 属性（使用数组简化表达方式）；
33行：使用 polygon 指令绘制多边形（这里是三角形），无填充色、使用前面设置的径向渐变做描边色、描边宽度设置为10、接头圆形，然后复制10份圆内均匀分布的旋转副本。
祝黑黑先生节日快乐！ 黑黑老师五一节快乐！{:4_187:} 看到灌水工作者几个字忍不住笑，黑黑真幽默。
感谢黑黑带来的幽静场景，让劳动者到这样的场景里休憩一下真不错，很安静优美。{:4_187:} 这svg小播真漂亮，就这么个三角，组合起来竟像有方向的齿轮了。
欣赏黑黑好帖，劳动节快乐{:4_187:} 红影 发表于 2026-5-1 11:39
这svg小播真漂亮，就这么个三角，组合起来竟像有方向的齿轮了。
欣赏黑黑好帖，劳动节快乐
节日嚎！ 红影 发表于 2026-5-1 11:34
看到灌水工作者几个字忍不住笑，黑黑真幽默。
感谢黑黑带来的幽静场景，让劳动者到这样的场景里休憩一下真 ...
灌水可不是虚头巴脑的事情，是有产出的地地道道的劳动，值得在这个节日予以表彰 梦江南 发表于 2026-5-1 10:48
黑黑老师五一节快乐！
节日嚎！ 梦油 发表于 2026-5-1 09:51
祝黑黑先生节日快乐！
同乐同乐！ 一贯的代码简洁 一贯的内涵丰富 一贯的效果漂亮 一贯的精彩示范 一贯的指点迷津 一贯的突出重点 一贯的简洁明了 一贯的求新求异 一贯的惠泽大众
页:
[1]
2