《奇幻术》（学习黑黑《格拉斯微风》代码）
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68c6bac1c5157e1a880151d8.jpg') no-repeat center/cover, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde); --ma-size: 30%; animation: hue-rotate 3s linear infinite var(--state); border-radius: 18px; }
#btnFs { left: 30px; bottom: 20px; color: skyblue; border-color: currentColor!important; }
#prog { position: absolute; cursor: pointer; opacity: 0.7; bottom: 53%; right: 11%; width: 20%; transform: rotate(-76deg);filter: hue-rotate(124deg); }
#ma { bottom: 240px; border-radius: 50%; }
#msvg ellipse { transform-box: fill-box; transform-origin: center; animation: rotate 1s var(--delay) linear infinite var(--state); }
#lrc { bottom: 30px; font:normal 2.2em Microsoft YaHei; sans-serif; color:#fff;}
#lrc::before { width: 0%; height: 100%; background: url('https://pic1.imgdb.cn/item/68bc526058cb8da5c885215f.jpg') center; background-clip: text;-webkit-background-clip: text; }
@keyframes cover1 { from { width: 0; }to { width: 100%; } }
@keyframes cover2 { from { width: 0; }to { width: 100%; } }
@keyframes hue-rotate {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1462828451" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4de2164e31e.mp4" autoplay loop muted></video>
<progress id="prog"></progress>
<div id="ma"><svg id="msvg" width="100%" height="100%" viewBox="-300 -300 600 600"></svg></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc(pa, geci)
var dr = Dr.dr(msvg);
dr.defs('defs');
dr.g('g1').addTo('defs');
dr.polyline('0 0,0 260', 'none', 'cyan', 3).addTo('#g1');
dr.ellipse(-0, 260, 40, 20, 'skyblue').addTo('#g1');
var tt = 12;
Array.from({length: tt}).forEach((_,k) => {
dr.use('#g1', 0, 0).transform(`rotate(${360/tt*k})`).style(`--delay: ${Math.random() * -4}s`);
});
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
aud.onplaying = aud.onpause = () => msvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
FS(pa, ma);
</script> 快速完成的，连视频都用的黑黑找的，感觉用在这个背景里挺好，就没换。
把旋转的小方块变成椭圆的了，发现绘制椭圆时的中心点不能移动呢，也算是试验的收获吧。
感谢黑黑的代码{:4_187:} 背景变色用了亚伦老师的代码，感谢亚伦老师{:4_187:} 你这个“序曲”搞得很有意思。{:5_106:} 变色的背景加变色小播，还有藏在旁边的变色进度条。绝了！{:4_187:} 漂亮，谢谢影子的精彩分享！{:4_178:} 梦油 发表于 2025-9-15 09:45
你这个“序曲”搞得很有意思。
我已经把里面的文字改了，呵呵{:4_173:} 梦江南 发表于 2025-9-15 11:55
变色的背景加变色小播，还有藏在旁边的变色进度条。绝了！
小播不变色的，跟着背景一起变的{:4_173:} 梦江南 发表于 2025-9-15 11:57
漂亮，谢谢影子的精彩分享！
谢谢江南鼓励{:4_187:} 红影 发表于 2025-9-15 23:12
小播不变色的，跟着背景一起变的
哦，进度条是同背景一起变的啊{:4_173:} 红影 发表于 2025-9-15 23:12
谢谢江南鼓励
影子也客气了 红影 发表于 2025-9-15 23:12
我已经把里面的文字改了，呵呵
画面给人一种魔幻的感觉，真有意思。 梦江南 发表于 2025-9-16 08:18
哦，进度条是同背景一起变的啊
这样变化着感觉更玄幻点{:4_173:} 梦江南 发表于 2025-9-16 08:18
影子也客气了
饿呢，下回不空客气了，大家都自己人{:4_173:} 梦油 发表于 2025-9-16 13:58
画面给人一种魔幻的感觉，真有意思。
被歌词里的忽明忽暗引得，想起亚伦老师的颜色变化了，就用了进来{:4_173:} 红影 发表于 2025-9-16 14:09
被歌词里的忽明忽暗引得，想起亚伦老师的颜色变化了，就用了进来
取众人之长，就有可能长众人之长。 红影 发表于 2025-9-16 14:07
这样变化着感觉更玄幻点
配合音乐更玄幻了，这个设计得真好。 红影 发表于 2025-9-16 14:07
饿呢，下回不空客气了，大家都自己人
嗯，都是自家人 梦油 发表于 2025-9-16 14:14
取众人之长，就有可能长众人之长。
看到了觉得好，就记着呢{:4_173:} 梦江南 发表于 2025-9-16 14:50
配合音乐更玄幻了，这个设计得真好。
这音乐倒是没什么，是直接搜出来的{:4_173:}