队长，你上面那个小动图还是用个论坛这个酒杯好{:4_176:}
本帖最后由 加林森 于 2022-9-1 00:33 编辑 <br /><br />小辣椒 发表于 2022-7-10 20:54
队长，你上面那个小动图还是用个论坛这个酒杯好
慢慢来啊。
<style>
#papa { left: -214px; width: 1024px; height: 1204px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://pic.imgdb.cn/item/630f659716f2c2beb1d98185.jpg') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; right: 20px; top: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; right: 140px; top: 50px; font: bold 1.5em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>
<div id="papa">
<div id="btnwrap">
<span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
<span id="tmsg">00:00<br>00:00</span>
</div>
<div id="lrctext">lrc歌词</div>
</div>
<script>
let aud = new Audio();
let lrcAr = [
['00.00','剑魂 (鱼多余版)- 鱼多余'],
['31.09','风声飘飘雨也潇潇'],
['34.12','夜半还睡不着'],
['38.81','忧伤怀抱谁眼泪掉'],
['42.65','窗外雨打芭蕉'],
['46.02','漫天繁星闪耀'],
['47.99','人儿痴痴笑'],
['50.12','不管来世只看今朝'],
['53.74','抛开宿命缠绕'],
['55.80','画一条轨道'],
['57.68','伴我逍遥去走一遭'],
['62.74','山外还有山比山高'],
['65.78','半山腰'],
['67.39','一声惊雷摇晃树梢'],
['70.64','人外还有人忘不掉'],
['73.60','你怀抱'],
['75.09','夜夜都是魂牵梦绕'],
['78.29','爱恨情仇都付谈笑'],
['81.07','多寂寥'],
['82.95','星辰变换诛仙桀骜'],
['86.11','引无数英雄竞折腰'],
['88.93','江山多娇'],
['90.37','封印魂魄于我剑鞘'],
['93.81','一声咆哮'],
['112.38','风声飘飘雨也潇潇'],
['116.17','夜半还睡不着'],
['120.21','忧伤怀抱谁眼泪掉'],
['123.89','窗外雨打芭蕉'],
['127.34','漫天繁星闪耀'],
['129.15','人儿痴痴笑'],
['131.31','不管来世只看今朝'],
['135.12','抛开宿命缠绕'],
['136.88','画一条轨道'],
['138.92','伴我逍遥去走一遭'],
['142.36','山外还有山比山高'],
['145.14','半山腰'],
['146.58','一声惊雷摇晃树梢'],
['149.91','人外还有人忘不掉'],
['152.92','你怀抱'],
['154.35','夜夜都是魂牵梦绕'],
['157.61','爱恨情仇都付谈笑'],
['160.62','多寂寥'],
['162.11','星辰变换诛仙桀骜'],
['165.39','引无数英雄竞折腰'],
['168.25','江山多娇'],
['169.69','封印魂魄于我剑鞘'],
['173.09','一声咆哮'],
['177.12','山外还有山比山高'],
['180.01','半山腰'],
['181.46','一声惊雷摇晃树梢'],
['184.82','人外还有人忘不掉'],
['187.75','你怀抱'],
['189.13','夜夜都是魂牵梦绕'],
['192.42','爱恨情仇都付谈笑'],
['195.41','多寂寥'],
['196.87','星辰变换诛仙桀骜'],
['200.19','引无数英雄竞折腰'],
['203.04','江山多娇'],
['204.51','封印魂魄于我剑鞘'],
['209.92','一声咆哮']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=1923211568.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
for (j = 0; j < lrcAr.length;j ++) {
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
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;
}
</script>
马黑黑 发表于 2022-7-10 20:46
看到了。GIF应选用或制作成背景透明的，这样效果好得多
下次制作时我会注意的。
加林森 发表于 2022-7-10 21:44
下次制作时我会注意的。
做好准备，不必一蹴而就
马黑黑 发表于 2022-7-10 21:44
做好准备，不必一蹴而就
明白。谢谢！
加林森 发表于 2022-7-10 19:50
酒量大的是不怕的。
上面的酒当心漏下来{:4_173:}
红影 发表于 2022-7-10 22:04
上面的酒当心漏下来
不怕的。有人喝。{:5_158:}
非常好听的歌曲！ 队长好制作， 来喝一杯！{:4_191:}{:4_204:}{:4_179:}
大猫咪 发表于 2022-7-11 10:59
非常好听的歌曲！ 队长好制作， 来喝一杯！
猫猫喜欢就好。来，咱们干一杯。{:4_191:}
加林森 发表于 2022-7-10 22:15
不怕的。有人喝。
队长是准备把大家都灌趴下啊{:4_173:}
红影 发表于 2022-7-11 14:32
队长是准备把大家都灌趴下啊
只要酒量大，谁怕谁啊？{:5_117:}
加林森 发表于 2022-7-11 15:42
只要酒量大，谁怕谁啊？
喝醉的人都是这样的想法，才会醉倒的{:4_173:}
红影 发表于 2022-7-11 16:45
喝醉的人都是这样的想法，才会醉倒的
不奇怪的。喜欢喝的人都这样。
加林森 发表于 2022-7-11 17:25
不奇怪的。喜欢喝的人都这样。
豪爽起来就忘了醉的难受了{:4_173:}
红影 发表于 2022-7-11 18:47
豪爽起来就忘了醉的难受了
就是。醉不醉就看你的本事了。
加林森 发表于 2022-7-11 19:00
就是。醉不醉就看你的本事了。
淹死会水的，喜欢喝的人，总逃不掉醉的可能{:4_173:}
{:4_176:}队长来干一个
红影 发表于 2022-7-11 19:12
淹死会水的，喜欢喝的人，总逃不掉醉的可能
肯定的，在醉中锻炼，继续醉。{:5_117:}
绿叶清舟 发表于 2022-7-11 19:30
队长来干一个
好啊，走一个！{:4_176:}
加林森 发表于 2022-7-11 19:57
肯定的，在醉中锻炼，继续醉。
喜欢喝的人乐此不疲{:4_173:}