Cyberworld
本帖最后由 马黑黑 于 2025-8-25 18:00 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/cyber.webp') no-repeat center/cover; --ma-size: 20%; }
#ma { left: 30px; bottom: 30px; }
#lz { position: absolute; width: 12vw; height: 12vw; top: 0; }
#btnFs { right: 20px; bottom: 20px; color: yellow; border-color: currentColor!important; }
.cc { animation: opacity 0.5s var(--delay) infinite alternate var(--state); }
@keyframes opacity { to { opacity: 0; } }
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=4441146" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"><svg id="msvg" width="100%" height="100%" viewbox="-200 -200 400 400"></svg></div>
<svg id="lz" width="150" height="150" viewbox="-200 -200 400 400"></svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var tt = 6, d = 'M-20 0,0 -70,20 0,20 -190,0 -100,-20 -190 Z';
Array.from({length: tt}).forEach((_,k) => {
dr.path(d, 'olive', 'orange', 2).transform(`rotate(${360/tt*k})`);
});
dr = Dr.dr(lz);
Array.from({length: 50}).forEach((_,k) => {
var R = Math.random() * 200 - 10;
var cx = R * Math.cos(Math.PI / 180 * 360 / 50 * k),
cy = R * Math.sin(Math.PI / 180 * 360 / 50 * k),
r = Math.round(Math.random() * 4) + 4;
dr.circle(cx,cy,r,'#fff').set('class','cc').style(`--delay: ${Math.random()}s`);
});
FS(pa, ma);
</script> 本帖最后由 马黑黑 于 2025-8-25 17:59 编辑 <br /><br /><div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/cyber.webp') no-repeat center/cover; --ma-size: 20%; }
#ma { left: 30px; bottom: 30px; }
#lz { position: absolute; width: 12vw; height: 12vw; top: 0; }
#btnFs { right: 20px; bottom: 20px; color: yellow; border-color: currentColor!important; }
.cc { animation: opacity 0.5s var(--delay) infinite alternate var(--state); }
@keyframes opacity { to { opacity: 0; } }
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=4441146" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"><svg id="msvg" width="100%" height="100%" viewbox="-200 -200 400 400"></svg></div>
<svg id="lz" width="150" height="150" viewbox="-200 -200 400 400"></svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var tt = 6, d = 'M-20 0,0 -70,20 0,20 -190,0 -100,-20 -190 Z';
Array.from({length: tt}).forEach((_,k) => {
dr.path(d, 'olive', 'orange', 2).transform(`rotate(${360/tt*k})`);
});
dr = Dr.dr(lz);
Array.from({length: 50}).forEach((_,k) => {
var R = Math.random() * 200 - 10;
var cx = R * Math.cos(Math.PI / 180 * 360 / 50 * k),
cy = R * Math.sin(Math.PI / 180 * 360 / 50 * k),
r = Math.round(Math.random() * 4) + 4;
dr.circle(cx,cy,r,'#fff').set('class','cc').style(`--delay: ${Math.random()}s`);
});
FS(pa, ma);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 帖子使用了两个 svg 标签：
（一）左下角小播，它作为 ma 的子元素出现；
（二）正上方白色粒子，直接作为 pa 的子标签出现，里面闪烁的白色粒子与帖子整体背景融为一体。白色粒子50个，在指定半径的圆形范围内随机布局。
两个 svg 同用一个 dr 画笔，26行代码是画笔交替。 小播构图：
以极简的路径，即，‘M-20 0,0 -70,20 0,20 -190,0 -100,-20 -190 Z’，作为单个 path 标签形状，然后每一个 path 标签一次旋转一定角度，多个路径最终构成炫酷的图案。
svg 的 transform 属性中的 rotate 转换应有三个参数：
transform=‘rotate(旋转角度 圆心X坐标 圆心Y坐标)';
由于前面的svg标签设置了 viewbox 属性，svg将在此视口作画，该属性已经将坐标搬到了矩形中央，所以 dr 画笔在设置旋转参数中可以省略后面圆心坐标值，缺省值默认为 0 0. 小播和白色粒子都是用代码画出来的。太厉害了！ 黑黑老师下午好。{:4_190:} 先是被音乐吸引到了，节奏感好强。。听得人一下子不瞌睡了{:4_173:} 小播是画出来的，这个知道，形状特别，中间还有镂空。。
看说明才发现，还画了一些白色粒子，在人物头顶上方，原地闪烁，并没有移动。
这位置，颜色，大小和闪烁节奏跟背景和视频完美融合，完 全没看出来。。。{:4_173:} 马黑黑 发表于 2025-8-25 13:45
小播构图：
以极简的路径，即，‘M-20 0,0 -70,20 0,20 -190,0 -100,-20 -190 Z’，作为单个 pa ...
很妙的设计，背景有点抽象，这个小播的形象有点锐利，刚好与背景相符。。
原来是一个四角尖的工字形，重复6次形成的图案。。
正中间交叠之后是个圆形。。{:4_199:} 两个 svg 漂亮！动感科技感十足，谢谢马老师精彩分享{:4_191:} 杨帆 发表于 2025-8-25 17:01
两个 svg 漂亮！动感科技感十足，谢谢马老师精彩分享
{:4_190:} 梦江南 发表于 2025-8-25 13:51
小播和白色粒子都是用代码画出来的。太厉害了！
{:4_191:} 梦江南 发表于 2025-8-25 13:52
黑黑老师下午好。
晚上好 花飞飞 发表于 2025-8-25 15:41
先是被音乐吸引到了，节奏感好强。。听得人一下子不瞌睡了
比咖啡还提神{:4_170:} 花飞飞 发表于 2025-8-25 15:48
小播是画出来的，这个知道，形状特别，中间还有镂空。。
看说明才发现，还画了一些白色粒子，在人物头顶上 ...
{:4_190:} 花飞飞 发表于 2025-8-25 15:51
很妙的设计，背景有点抽象，这个小播的形象有点锐利，刚好与背景相符。。
原来是一个四角尖的工字形，重 ...
看出来了 马黑黑 发表于 2025-8-25 18:56
比咖啡还提神
提神曲就是神曲。。。当之无愧{:4_173:} 马黑黑 发表于 2025-8-25 18:57
哎这个粒子藏得有点深啊。。哈哈{:4_173:} 马黑黑 发表于 2025-8-25 18:57
看出来了
一看六个分身，切成六块就是一块的形状了。。反过来想的{:4_170:} 花飞飞 发表于 2025-8-25 19:08
一看六个分身，切成六块就是一块的形状了。。反过来想的
思维还挺活跃灵动