朴树 - 平凡之路
<style>#papa { left: -214px; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t22/webp/pfvl1.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { transform: rotate(-45deg); }
#mplayer circle, #mplayer line, #player path { opacity: 0.5; }
#tmsg { font: normal 1em sans-serif; fill: #ccc; }
#lrc { --motion: cover1; --tt: 2s; --state: running; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(20,10%,80%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(20,100%,0%,.95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(20,65%,50%,.95),hsla(60,30%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
.ball { --dur: 10s; --delay: 0s; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(hsla(0,100%,50%,.85), hsla(0,60%,50%,.75)); offset-distance: 0; left: 0; top: 0; offset-path: path("M0 0,100 500,200 20,300 400 ,400 50,500 300,600 90,700 400,800 120,900 300,1000 150"); animation: move var(--dur) var(--delay) linear infinite; }
.ball1 { --dur: 8s; --delay: 4s; width: 40px; height: 40px; background: radial-gradient(hsla(0,100%,90%,.85), hsla(0,60%,50%,.75)); }
.ball2 { --dur: 14s; --delay: 6s; width: 60px; height: 60px; background: radial-gradient(hsla(0,50%,50%,.85), hsla(0,80%,20%,.75)); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes move { to { offset-distance: 100%;} }
</style>
<div id="papa">
<span class="ball"></span><span class="ball ball1"></span><span class="ball ball2"></span>
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div style="position: absolute; bottom: 30px; padding: 4px; transform: rotate(45deg); border: 0px solid #ffcc00; box-shadow: 2px 2px 8px #000;">
<svg id="mplayer" viewBox="0 0 100 100" width="100" height="100">
<g id="tmsg">
<text x="52%" y="0"><textPath id="curMsg" xlink:href="#curPath" text-anchor="middle" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="60%" y="0"><textPath id="durMsg" xlink:href="#durPath" text-anchor="middle" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
<circle id="btnplay" cx="50" cy="50" r="35" fill="transparent" style="cursor: pointer" />
<circle id="track" cx="50" cy="50" r="45" fill="none" stroke="snow" stroke-width="6" style="cursor: pointer" />
<circle cx="50" cy="50" r="6" fill="snow" />
<line id="hand" x1="50" y1="50" x2="50" y2="20" stroke="snow" stroke-width="2" marker-end="url(#arrow)" />
<marker id="arrow" markerHeight="10" markerWidth="10" orient="auto" refx="3" refy="6.5" >
<path d="M3,3 L3,10 L8,6 L3,3" fill="white" />
</marker>
<path id="curPath" d="M 10 60 Q 50 0 90 60" fill="none" stroke="none"/>
<path id="durPath" d="M 0 38 Q 50 100 100 38" fill="none" stroke="none"/>
</svg>
</div>
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), };
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/08/26/c1406e90cd547f8899660e174881d7e8.mp3';
aud.autoplay = true;
aud.loop = true;
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => { let progress = aud.currentTime * 360 / aud.duration; hand.setAttribute('transform', 'rotate(' + progress +', 50, 50)'); curMsg.textContent = toMin(aud.currentTime); durMsg.textContent = toMin(aud.duration); for(j = 0; j < lrcAr.length; j ++) { if(aud.currentTime >= lrcAr) { if(mKey === j) showLrc(lrcAr); else continue; } } });
track.onclick = (e) => {let angle = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;angle+= (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * angle / 360;}
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
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;}
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
</script> 黑黑又带来新效果，有喜欢的透明框，指针试播放器按钮，还有随机跳动的圆球{:4_187:} 这张背景也很有感觉，路上的车水马龙，每个人都匆忙走着自己的路{:4_187:} 红影 发表于 2022-10-7 08:11
这张背景也很有感觉，路上的车水马龙，每个人都匆忙走着自己的路
没看见有人也没看见有车呀{:5_106:} 红影 发表于 2022-10-7 08:10
黑黑又带来新效果，有喜欢的透明框，指针试播放器按钮，还有随机跳动的圆球
指针本来是浮于数字之上的，设置透明度后感觉又落下去了 这个球球效果加进去了{:4_178:}
而且我发现手机加分后，音乐和播放器一切照旧运行自如 小辣椒 发表于 2022-10-7 09:25
这个球球效果加进去了
而且我发现手机加分后，音乐和播放器一切照旧运行自如
等下我叫山人也来测试下评分{:4_173:} 马黑黑 发表于 2022-10-7 08:27
指针本来是浮于数字之上的，设置透明度后感觉又落下去了
黑黑，这个你有改变过吗？加分后没有影响了 小辣椒 发表于 2022-10-7 09:27
黑黑，这个你有改变过吗？加分后没有影响了
之前发现过类似的情况，其实就是加入了 seeked 监听事件，但在其他帖子不一定都见效的。还不能理解其中的缘由。
马黑黑 发表于 2022-10-7 08:26
没看见有人也没看见有车呀
那么多车灯，肯定有车也有人啊，现在无人驾驶又没那么普及{:4_173:} 马黑黑 发表于 2022-10-7 08:27
指针本来是浮于数字之上的，设置透明度后感觉又落下去了
还好啊，仔细看还是浮在上面的。 红影 发表于 2022-10-7 09:56
还好啊，仔细看还是浮在上面的。
管它在哪儿了{:5_106:} 红影 发表于 2022-10-7 09:55
那么多车灯，肯定有车也有人啊，现在无人驾驶又没那么普及
无人驾驶已经是主流了 跳动的人生，飞驰的车辆，聆听安静的歌，欣赏问好老师！{:4_191:} 马黑黑 发表于 2022-10-7 09:57
管它在哪儿了
就是，这样才洒脱{:4_189:} 马黑黑 发表于 2022-10-7 09:57
无人驾驶已经是主流了
这张图图里的肯定不是{:4_173:} 色调和谐、动静相宜的好帖！欣赏！ 相约爱晚亭 发表于 2022-10-7 11:25
色调和谐、动静相宜的好帖！欣赏！
感谢支持 红影 发表于 2022-10-7 10:41
这张图图里的肯定不是
我也不知道，拍摄是没注意车里面的情景，只顾取景 红影 发表于 2022-10-7 10:41
就是，这样才洒脱
说的也是