Sun Mother

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz01.css';
   
3.         #pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/sunma.webp') no-repeat center/cover; }
   
4.         #progress { position: absolute; right: 20px; top: 0; width: 15vw; height: 15vw; transition: .4s; }
   
5.         #prog, #track { fill: none; stroke: red; stroke-width: 16; stroke-opacity: .4; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
   
6.         #prog { stroke-opacity: .8; }
   
7.         #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#rGrd); animation: rotate 8s linear infinite var(--state); }
   
8.         #btnFs { bottom: 20px; color: tan; border-color: currentColor!important; }
   
9. </style>
   
10. 
    
11. <div id="pa">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1355146597" autoplay loop></audio>
    
13.         <video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e593f4b8ab37.mp4" autoplay loop muted></video>
    
14.         <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
15.                 <g id="g1" class="sepia"><title>ALT+X</title></g>
    
16.                 <g id="g2"><title>调节进度</title></g>
    
17.         </svg>
    
18. </div>
    
19. 
    
20. <script type="module">
    
21.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    
22.         import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
    
23. 
    
24.         var dr = Dr.dr(progress);
    
25.         dr.gradient('radialGradient', {id: 'rGrd'}, [['red',0],['yellow',.25],['red',.9]]);
    
26.         dr.path('M-10 0,L-70 -150,Q0 -100,70 -150,L10 0').addTo(g1).rotates(5);
    
27.         dr.line(-150,190,150,190).id('track').addTo(g2);
    
28.         dr.line(-150,190,150,190).id('prog').addTo(g2);
    
29. 
    
30.         FS(pa, g1);
    
31. </script>

复制代码

樵歌

灰常入心的歌曲，俺来沉浸式享听。。

红影

原来小播的图案就径向渐变来的，很奇妙的设计，代码十分简洁，是黑黑升级后的版本呢

红影

{id: 'rGrd'}和css里的对应，颜色就被设定上去了呢

马黑黑

红影 发表于 2025-9-22 15:42
{id: 'rGrd'}和css里的对应，颜色就被设定上去了呢

这是 svgdr 在使用指令操纵 svg 的相应标签 的 id，渐变标签有一个 id。svg渐变约定：渐变元素需要一个 id 标识以便 fill 和 stroke 的着色行为可以通过 url(#id) 使用它。

马黑黑

红影 发表于 2025-9-22 15:22
原来小播的图案就径向渐变来的，很奇妙的设计，代码十分简洁，是黑黑升级后的版本呢

升不升级都能实现这类功能，升级的意义主要在于令指令的下达更简洁或可以有多种下达方式。

马黑黑

樵歌 发表于 2025-9-22 13:07
灰常入心的歌曲，俺来沉浸式享听。。

樵歌

马黑黑 发表于 2025-9-22 18:24

换个

马黑黑

樵歌 发表于 2025-9-22 19:44
换个

你好色呀

花飞飞

感觉这个小播又是闭着眼画的，形状好看，色彩鲜艳。。。
里面还有天眼在无时无刻巡视。。
特别棒的效果。。

花飞飞

径向渐变填充，能形成这样奇妙的圆形装饰，跟天珠一样，真是神来一笔，开始还想这中间的圆是怎么画的。。就是渐变时红开头，黄至.25，其余到.9，渐变特别自然。。。

花飞飞

这个背景漂亮，金色的粒子光点飞舞。大自然的气息扑面而来。。。画面温馨。。
音乐舒缓，与之前风格不同，好听

马黑黑

花飞飞 发表于 2025-9-22 20:11
这个背景漂亮，金色的粒子光点飞舞。大自然的气息扑面而来。。。画面温馨。。
音乐舒缓，与之前风格不同， ...

风格差不多的

马黑黑

花飞飞 发表于 2025-9-22 20:07
径向渐变填充，能形成这样奇妙的圆形装饰，跟天珠一样，真是神来一笔，开始还想这中间的圆是怎么画的。。就 ...

一切可以尝试，如果不知道原理的话。知道原理，尝试起来会简单

马黑黑

花飞飞 发表于 2025-9-22 20:02
感觉这个小播又是闭着眼画的，形状好看，色彩鲜艳。。。
里面还有天眼在无时无刻巡视。。
特别 ...

谢谢鼓励

花飞飞

马黑黑 发表于 2025-9-22 20:47
谢谢鼓励

原来说实话这叫鼓励嘛。。。
拍砖我也不行啊，那是高手才能干的事。
我只有挨砖的份

花飞飞

马黑黑 发表于 2025-9-22 20:47
一切可以尝试，如果不知道原理的话。知道原理，尝试起来会简单

现在知道了。。其实回家那贴也跟这个差不多，只不过被透明的和线条给吸引跑了。。

花飞飞

马黑黑 发表于 2025-9-22 20:46
风格差不多的

同意同意，都是黑氏风格。。

马黑黑

花飞飞 发表于 2025-9-22 21:05
现在知道了。。其实回家那贴也跟这个差不多，只不过被透明的和线条给吸引跑了。。

是的吧