红山 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2025-9-30 12:14

红山

马黑黑 发表于 2025-9-30 12:15

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://638183.freep.cn/638183/t24/w6/hsuj.webp') no-repeat center/cover; }
#progress { position: absolute; bottom: -20px; width: 20vw; height: 20vw; transition: .4s; }
#g1 { cursor: pointer; fill: transparent; stroke: url('#grd'); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
#g2 { cursor: pointer; fill: none; stroke: #eee; stroke-opacity: .5; stroke-width: 8; stroke-linecap: round; }
#prog { stroke: url(#grd); stroke-opacity: 1; }
#btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor !important; }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=494330419" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted></video>
<svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <g id="g1"><title>ALT+X</title></g>
   <g id="g2"><title>调节进度</title></g>
</svg>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';

var dr = Dr.dr(progress);

dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['gold',0.5],['darkred',1]]);
dr.path('M-130 -50 C-240 220,240 220,130 -50').id('track').addTo(g2);
dr.path('M-130 -50 C-240 220,240 220,130 -50').id('prog').addTo(g2);
dr.ellipse(0, 0, 100, 20).addTo(g1).rotates(3);
dr.path('M-160 0 Q0 -260,160 0').set('id','txtpath').addTo('defs');
dr.text('梵天 · 红山', 0, 0, 'url(#grd)')
   .sets({stroke: 'darkred', 'storke-width': 2})
   .style('font: bold 2.6em sans-serif; letter-spacing: 4px; text-anchor: middle;')
   .textPath('txtpath','50%');

FS(pa, g1);
</script>

马黑黑 发表于 2025-9-30 12:23

小播构造：分三个部分

（一）文本，渲染歌曲名称。使用文本路径安排文本走向。代码在 31~35 行；
（二）播放暂停控制器。画几个椭圆旋转构图，放入 g1 分组，g1 作为整体充当音频播放暂停控制器。代码在第 30 行；
（三）音频进度显示、控制。使用路径绘制两个重叠的弧形形状。代码在 31~32 行。

三个部分，整体上均使用相同的线性渐变做填充和（或）描边色，各部分另有其它着色细节。

杨帆发表于 2025-9-30 13:08

唯美之作，谢谢马老师精彩示范，祝老师双节快乐{:4_176:}

马黑黑 发表于 2025-9-30 13:22

杨帆发表于 2025-9-30 13:08
唯美之作，谢谢马老师精彩示范，祝老师双节快乐

节日好

杨帆发表于 2025-9-30 14:03

马黑黑发表于 2025-9-30 13:22
节日好

谢谢老师，同乐{:4_180:}

小辣椒 发表于 2025-9-30 16:43

马黑黑发表于 2025-9-30 12:23
小播构造：分三个部分

（一）文本，渲染歌曲名称。使用文本路径安排文本走向。代码在 31~35 行；

这个加了文本文字，这样可以用为标题字了{:4_173:}

小辣椒 发表于 2025-9-30 16:46

黑黑辛苦，每天有新东西出来，越来越厉害了{:4_178:}

马黑黑 发表于 2025-9-30 16:49

杨帆发表于 2025-9-30 14:03
谢谢老师，同乐

客气客气

马黑黑 发表于 2025-9-30 16:50

小辣椒发表于 2025-9-30 16:43
这个加了文本文字，这样可以用为标题字了

对。偶尔，标题还是需要的

小辣椒 发表于 2025-9-30 16:51

马黑黑发表于 2025-9-30 16:50
对。偶尔，标题还是需要的

这个标题字可以不用了，直接文本文字，这个好{:4_170:}

马黑黑 发表于 2025-9-30 16:51

小辣椒发表于 2025-9-30 16:46
黑黑辛苦，每天有新东西出来，越来越厉害了

没啥厉害，这都是ES模块和其它小工具的加持，让做帖编程非常简单了

马黑黑 发表于 2025-9-30 16:52

小辣椒发表于 2025-9-30 16:51
这个标题字可以不用了，直接文本文字，这个好

是不是啊

小辣椒 发表于 2025-9-30 16:55

马黑黑发表于 2025-9-30 16:51
没啥厉害，这都是ES模块和其它小工具的加持，让做帖编程非常简单了

现在确实厉害，前天我朋友直接AI输送了自己的要求出来一个播放器，代码全部有的，我看了非常不错就是按钮不喜欢，全部AI完成

马黑黑 发表于 2025-9-30 17:55

小辣椒发表于 2025-9-30 16:55
现在确实厉害，前天我朋友直接AI输送了自己的要求出来一个播放器，代码全部有的，我看了非常不错就是按钮 ...

AI很厉害，不过完全依赖AI不太好。AI可以做开发辅助，碰上难题问问它，或者，将它提供的作品彻底按自己的需求修改一遍。

红影发表于 2025-9-30 22:11

“三个部分，整体上均使用相同的线性渐变做填充和（或）描边色，各部分另有其它着色细节。”
构思巧妙，效果精美。这个带文字的特别喜欢{:4_199:}

马黑黑 发表于 2025-9-30 22:13

红影发表于 2025-9-30 22:11
“三个部分，整体上均使用相同的线性渐变做填充和（或）描边色，各部分另有其它着色细节。”
构思巧妙，效 ...

文人晚上嚎{:4_170:}

朵拉发表于 2025-10-4 22:21

漂亮效果，学生已交作业，请老师指正{:4_190:}

马黑黑 发表于 2025-10-4 22:49

朵拉发表于 2025-10-4 22:21
漂亮效果，学生已交作业，请老师指正

{:4_199:}

页: [1]

花潮论坛's Archiver

红山