叹 （学习黑黑圆弧歌词）
<style>
#papa { left: -242px; width: 1080px; height: 640px; background: darkred url('https://pic1.imgdb.cn/item/633ee8c416f2c2beb169dc99.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; bottom: 80px; right:100px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#tan { position: absolute; top: 30px; left:50px; }
#zi { position: absolute; bottom: 20px; right:50px; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; bottom: 120px; display: block; }
#lrctxt { text-anchor: middle; dominant-baseline: text-after-edge; fill: url(#gradient); font: bold 2em sans-serif; text-shadow: 1px 1px 2px hsla(0,0%,90%,.72); letter-spacing: 3px; }
#tmsg { fill: hsla(0,100%,95%,.7); font: bold 1em sans-serif; }
#btnwrap { display: block; fill: hsla(0,100%,95%,.7); cursor: pointer; }
#btnwrap:hover { fill: hsla(0,100%,100%,.8); }
</style>
<div id="papa">
<img id="zi" src="https://pic1.imgdb.cn/item/633eea7016f2c2beb16d2b5e.gif" alt="" />
<svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(0,0,0,0.35)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="2" stroke="hsla(0,100%,0%,0.25)" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
<g id="btnwrap">
<path id="btnplay" d="M 50 50,50 70,70 60 z"></path>
<path id="btnmid" d="M 55 50, 55 70, 60 70, 60 50, 55 50 z" fill="transparent"></path>
<path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z"></path>
</g>
</svg>
<svg id="lrc" width="600" height="150">
<path id="lrcPath" fill="none" stroke="none" d="M 0 150 A 460 460, 10, 0, 1, 600 150" />
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="red" stop-opacity="0.8" />
<stop offset="35%" stop-color="#113DEE" stop-opacity="0.8" />
<stop offset="65%" stop-color="#EEEE11" stop-opacity="0.8" />
<stop offset="100%" stop-color="#34AA34" stop-opacity="0.8" />
</linearGradient>
</defs>
<textx="54%" y="0"><textPath id="lrctxt" xlink:href="#lrcPath">花潮论坛lrc在线</textPath></text>
</svg>
<img id="tan" src="https://pic1.imgdb.cn/item/633eea1216f2c2beb16c79b4.gif" alt="" />
</div>
<script>
let aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len:
track.getTotalLength(), };
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1901049671.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;}});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
btnstate();
</script> 跟在黑黑后面学一个，感谢黑黑的代码{:4_187:} “叹”字的歌名学了个在线动态字，挺好玩的{:4_173:}
https://pic1.imgdb.cn/item/633ef9da16f2c2beb18a4a00.gif 把花潮地址弄了个跳舞一样的字，不知道什么地方能用上，本来想放帖子里，觉得有点乱。 我现在是手机在看。好听好看！ 叹气叹气，所叹之气都气化成了粒子，好玩 这个“叹”字设计得惟妙惟肖。 加林森 发表于 2022-10-7 00:01
我现在是手机在看。好听好看！
队长那么晚还没休息啊，你还在生病，咋这么不注意啊{:4_184:} 醉美水芙蓉 发表于 2022-10-7 07:01
挺漂亮的！红影美女厉害！
谢谢水芙蓉美女，学着玩个{:4_173:} 马黑黑 发表于 2022-10-7 07:35
叹气叹气，所叹之气都气化成了粒子，好玩
黑黑的这个解说有意思{:4_173:} 梦油 发表于 2022-10-7 08:53
这个“叹”字设计得惟妙惟肖。
网上有在线字体设计，很好玩的{:4_173:} 还一个我名字的字母的，不知道为什么那个点看不出来
https://pic1.imgdb.cn/item/633eea7016f2c2beb16d2b5e.gif 红影 发表于 2022-10-7 09:10
黑黑的这个解说有意思
帖子做的很漂亮哈{:4_199:} 字体变化好神奇{:4_199:} 亲爱的，这个帖子按千羽是说法看点多多{:4_178:} 音乐和这个叹子效果特别的融洽 红影 发表于 2022-10-7 09:08
队长那么晚还没休息啊，你还在生病，咋这么不注意啊
我归队啦。 马黑黑 发表于 2022-10-7 09:22
帖子做的很漂亮哈
谢谢黑黑的代码，给了大家很多欢乐的理由{:4_187:}