送你一首开心的歌
<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://s21.ax1x.com/2025/11/01/pVzBiAx.jpg') no-repeat center/cover;border-radius:32px; }
#progress { position: absolute; bottom: 160px; left: 10%;width: 10vw; height: 10vw; 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); } }
#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 37%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkOrange; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#vid { position: absolute; width: 300px; height: 300px; object-fit: cover; aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(3px 4px 20px #000); mix-blend-mode: soft-light; cursor: pointer; }
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/7aa24b0e79a3cb2a4bfc8075bf5cb8ce.mp3" 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';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc(pa, geci);
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> 好听，大家都有了。{:4_205:} 本帖最后由 杨帆 于 2025-11-1 14:17 编辑
背景图现在看不到呀，什么原因呢{:4_171:} 杨帆 发表于 2025-11-1 14:11
背景图现在看不到呀，什么原因呢
问好杨帆，这背景图是从图床上传的，你看不到吗？ 樵歌 发表于 2025-11-1 14:05
好听，大家都有了。
问好樵歌老师，谢谢，祝福你全福哦！{:4_204:} 俺也来听歌 梦油 发表于 2025-11-1 14:32
俺也来听歌
谢谢梦油来听歌。{:4_204:} 梦江南 发表于 2025-11-1 14:38
谢谢梦油来听歌。
俺更想聆听江南唱的歌。 梦江南 发表于 2025-11-1 14:29
问好杨帆，这背景图是从图床上传的，你看不到吗？
图床上传的，应该可以看到 呀{:4_173:} 梦油 发表于 2025-11-1 15:05
俺更想聆听江南唱的歌。
江南五音不全唱不来歌。 杨帆 发表于 2025-11-1 15:09
图床上传的，应该可以看到 呀
这是怎么回事呢？ 梦江南 发表于 2025-11-1 15:34
这是怎么回事呢？
其因不明呀
杨帆 发表于 2025-11-1 15:43
其因不明呀
看这样子，好像是MP4遮住了啊 梦江南 发表于 2025-11-1 16:46
看这样子，好像是MP4遮住了啊
你又编辑了？现在可以看到了！靓丽，精美，正能量{:4_187:} 杨帆 发表于 2025-11-1 16:56
你又编辑了？现在可以看到了！靓丽，精美，正能量
没有编辑啊，可能是网络关系吧。看到就好。 梦江南 发表于 2025-11-1 17:17
没有编辑啊，可能是网络关系吧。看到就好。
是，看到真好，也许是网络关系{:4_174:} 杨帆 发表于 2025-11-1 17:19
是，看到真好，也许是网络关系
看到就好。 梦江南 发表于 2025-11-1 15:33
江南五音不全唱不来歌。
你朗诵的声音很甜啊。 阿姨这个背景图是AI制作是吧，这个配了视频效果，加了播放器和音乐，制作很美{:4_199:} 现在论坛建了AI板块，阿姨你可以发---人机音画视频里面
页:
[1]
2