加林森 发表于 2022-7-10 11:28
猫猫上来玩了。有空你也可以制作的。
嗯嗯 空了就学习 ，{:4_187:}
本帖最后由 加林森 于 2022-9-6 10:06 编辑 <br /><br />大猫咪 发表于 2022-7-10 11:29
嗯嗯 空了就学习 ，
好的。
<style>
#papa { left: -214px; width: 1024px; height: 800px; background: #666 url('https://pic.imgdb.cn/item/6316a6cf16f2c2beb1410a80.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;right: 100px; bottom: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; top: 20px; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px snow, 2px 2px 3px #000; letter-spacing: 3px; }
</style>
<div id="papa">
<div id="mplayer">
<svg width="100%" height="100%" shape-rendering="geometricPrecision">
<g transform="rotate(-90, 60, 60)">
<circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.35" />
<circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="3" stroke-opacity="0.65"/>
</g>
<text fill="orange">
<tspan id="cur" x="40" y="55">00:00</tspan>
<tspan id="dur" x="40" y="75">00:00</tspan>
</text>
</svg>
</div>
<svg id="lrc" width="410" height="150">
<defs><path id="lrcPath" fill="none" stroke="red" d="M 20 20 Q 200 180 400 20" /></defs>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="blue"/>
<stop offset="35%" stop-color="orange"/>
<stop offset="65%" stop-color="gray"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<text x="0" y="20"><textPath id="lrctxt" xlink:href="#lrcPath">任然 - 空空如也</textPath></text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','老人与海-G.E.M.邓紫棋'],
['11.05','如果枯萎是那花儿的未来'],
['17.10','你还会不会灌溉'],
['21.04','若向日葵 不愿把脸转过来'],
['27.56','你还会不会留下来'],
['32.74','岸一直把浪推开'],
['37.86','海浪却一次次回来'],
['41.86','桑田沧海 爱是依旧无改'],
['48.35','任你留下来 还是离开'],
['52.02','我还会 奋身地爱'],
['56.56','尽管可能 只剩残骸'],
['62.16','我还会 满怀期待'],
['67.01','尽管可能 会满身伤害'],
['72.65','再残酷的大海'],
['77.44','永不可能 把我打败'],
['82.46','我因爱而在 为爱醒来'],
['87.86','生若不爱 何等苍白'],
['94.65','看 岸一直把浪推开'],
['100.58','海浪却一次次回来'],
['104.36','桑田沧海 爱是依旧无改'],
['110.93','任你留下来 还是离开'],
['114.48','我还会 奋身地爱'],
['119.15','尽管可能 只剩残骸'],
['124.87','我还会 满怀期待'],
['129.68','尽管可能 会满身伤害'],
['135.35','再残酷的大海'],
['140.09','永不可能 把我打败'],
['145.08','我因爱而在 为爱醒来'],
['150.56','生若不爱 何等苍白'],
['157.36','你即使再把我推开'],
['163.06','我还会再一次回来'],
['166.94','桑田沧海 爱是依旧无改'],
['173.58','我是因爱而在 为爱醒来'],
['178.00','谢谢欣赏']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1970554437.mp3';
aud.autoplay = true;
aud.loop = true;
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
mplayer.onmousemove = (e) => {
if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
mplayer.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else {
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
cur.textContent = toMin(aud.currentTime);
dur.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
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;
}
</script>
小辣椒 发表于 2022-7-10 11:16
现在是感觉不调整不行了，否则上班吃不消了
所以要好好调整
马黑黑 发表于 2022-7-10 11:49
所以要好好调整
调整感觉也是辛苦的，主要要静下心来，前段时间太急，焦虑。。。。。
小辣椒 发表于 2022-7-10 11:52
调整感觉也是辛苦的，主要要静下心来，前段时间太急，焦虑。。。。。
心理调试很重要，需要一个适应过程
小辣椒 发表于 2022-7-10 10:36
我现在手机上有睡眠音乐的
军港之夜？