好人一生平安回赠小辣椒
本帖最后由 梦江南 于 2025-9-17 19:14 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px;margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/9;--bg: url('https://cccimg.com/view.php/bc3b3b4d6e6f9af77e0a81cbe5e6bcf3.jpg') no-repeat center/cover; --ma-size:16%; }
#btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }
#prog { position: absolute; right: 10px; bottom: 10px; width: var(--ma-size); cursor: pointer; filter: hue-rotate(83deg) opacity(.6); }
#ma { right: 0.7%; bottom: 5%; border-radius: 50%; }
#lrc { right: 6%; top: 10%; color: #cde6c7;font-size: 24px; font-weight: bold;letter-spacing: 4px; writing-mode: vertical-lr; }
#lrc::before { width: 100%; height: 0; background: url('https://cccimg.com/view.php/bc3b3b4d6e6f9af77e0a81cbe5e6bcf3.jpg') center; background-clip: text; }
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
.vid { mixed-blend-mode: screen; webkit-mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
opacity: .60;
transform: rotateY(0deg);
mix-blend-mode: hard-light; transform: rotateY(0deg);}
#msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
@keyframes move { to { stroke-dashoffset: 0; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5279459" autoplay loop></audio>
<video class="vid pd-vid" src="
https://video.699pic.com/videos/28/48/54/a_kJVT3rMcKDrD1667284854_10s.mp4" autoplay loop muted></video>
<progress id="prog"></progress>
<div id="ma" class="opacity">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></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= [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var dr = Dr.dr(msvg);
dr.circle(0, 0, 80, 'none', '#fff', 10).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
dr.line(3, 0, 70, 0, '#eee', 10).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
FS(pa, ma);
lrc(pa, geci);
</script> 本帖最后由 梦江南 于 2025-9-18 07:32 编辑
@小辣椒，不好意思，阿姨只会做这样，还望您喜欢。祝您健康幸福！{:4_179:} 好人送好歌，好歌送好人。 这个构思特别好，杯酒送小辣椒，这图里还藏着小辣椒的头像呢。
这个小播很适合这样的背景和视频效果。江南的制作太美了，小辣椒亲爱的收礼开心{:4_199:} 这个歌词同步的背景也好，非常适合整体效果{:4_187:} 谢谢江南精彩分享，祝小辣椒收礼 开心{:4_204:} 梦油 发表于 2025-9-17 19:40
好人送好歌，好歌送好人。
谢谢梦油第一时间来支持。早上好！{:5_108:} 红影 发表于 2025-9-17 23:07
这个构思特别好，杯酒送小辣椒，这图里还藏着小辣椒的头像呢。
这个小播很适合这样的背景和视频效果。江南 ...
谢谢影子这么晚了还来给江南帖子高评鼓励，很过意不去。衷心祝你平安幸福！{:4_187:} 红影 发表于 2025-9-17 23:09
这个歌词同步的背景也好，非常适合整体效果
谢谢，影子的点评是给江南的一种信心，一种动力，继续努力。{:4_185:} 杨帆 发表于 2025-9-18 06:58
谢谢江南精彩分享，祝小辣椒收礼 开心
杨帆早，谢谢对江南帖子的分享支持，祝开心快乐！{:4_204:} 梦江南 发表于 2025-9-18 07:38
谢谢梦油第一时间来支持。早上好！
彼此支持嘛！你对俺的支持也是一贯的，热情的啊！ 梦油 发表于 2025-9-18 13:46
彼此支持嘛！你对俺的支持也是一贯的，热情的啊！
在同一论坛里互相支持是应该的。这样才开心啊！ 梦江南 发表于 2025-9-17 19:19
@小辣椒，不好意思，阿姨只会做这样，还望您喜欢。祝您健康幸福！
谢谢阿姨，太激动了，这个播放器我还没有做过的，阿姨也是厉害，一个个作业都那么优秀，背景图片大气，人物高清，歌曲好听，播放器漂亮，太喜欢了{:4_178:} 歌词遮罩还用了人物图片，创新的{:4_199:} 梦油 发表于 2025-9-17 19:40
好人送好歌，好歌送好人。
谢谢梦油，最温暖的你{:4_187:} 红影 发表于 2025-9-17 23:07
这个构思特别好，杯酒送小辣椒，这图里还藏着小辣椒的头像呢。
这个小播很适合这样的背景和视频效果。江南 ...
亲爱的，很开心，这么美美的礼物，而且这这些播放器作业我都没有做过的， 杨帆 发表于 2025-9-18 06:58
谢谢江南精彩分享，祝小辣椒收礼 开心
问好杨帆，谢谢，很美的礼物，很开心的{:4_187:} 继续欣赏，好美的歌，循环。。{:4_208:} 小辣椒 发表于 2025-9-18 15:50
谢谢阿姨，太激动了，这个播放器我还没有做过的，阿姨也是厉害，一个个作业都那么优秀，背景图片大气，人 ...
小辣椒来了，很高兴。你喜欢就好。{:4_179:} 小辣椒 发表于 2025-9-18 15:51
歌词遮罩还用了人物图片，创新的
这也是碰巧的。