【月满花潮庆华诞】高胜美，晚风
本帖最后由 梦江南 于 2025-10-9 10:04 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: tan url('https://cccimg.com/view.php/288b15d7ec626487b22cfc07330700ec.gif') no-repeat center/cover;border-radius:32px; }
#progress { position: absolute; bottom: 360px; 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:DarkCyan; 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://cccimg.com/view.php/a9a23c8c9035a8737f712c517984f135.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> 鸣谢黑黑老师的“红山”代码。学习了。{:5_161:} 字幕变幻丰富多彩啊 梦油 发表于 2025-10-9 10:15
字幕变幻丰富多彩啊
谢谢梦油第一时间支持。祝开心快乐！{:4_190:} 真是丰富多彩呢
{:4_204:}
澜天 发表于 2025-10-9 10:57
真是丰富多彩呢
谢谢你欣赏，今天有朗读了吗？{:4_190:} 精致华美！ 小文 发表于 2025-10-9 12:19
精致华美！
问好小文，好久不见，祝双节快乐。{:4_190:} 漂亮~谢谢江南精彩分享{:4_204:} 杨帆 发表于 2025-10-9 13:30
漂亮~谢谢江南精彩分享
问好杨帆，谢谢欣赏，祝双节快乐。{:4_190:} 梦江南 发表于 2025-10-9 10:37
谢谢梦油第一时间支持。祝开心快乐！
彼此彼此 梦油 发表于 2025-10-9 14:19
彼此彼此
同乐同乐 画面动态非常契合歌曲的主旨。{:4_199:} 那个播放器很好！ 梦江南 发表于 2025-10-9 11:06
谢谢你欣赏，今天有朗读了吗？
有的
现在来发
{:4_190:} 樵歌 发表于 2025-10-9 16:25
画面动态非常契合歌曲的主旨。
问好樵 歌老师，谢谢欣赏。双节快乐!{:4_190:} 樵歌 发表于 2025-10-9 16:26
那个播放器很好！
这个播放器代码是黑黑老师的。
问，这二天怎么没看到偶然版主？ 澜天 发表于 2025-10-9 16:45
有的
现在来发
急不着待了！{:4_189:} 梦江南 发表于 2025-10-9 16:57
急不着待了！
哈哈
发好啦
澜天 发表于 2025-10-9 17:00
哈哈
发好啦
好的，就去。