机器人
本帖最后由 马黑黑 于 2022-10-14 07:35 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: snow url('https://638183.freep.cn/638183/t22/webp/robot.webp') 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; top: 20px; left: 10px; width: 400px; height: 60px; font: normal 14px sans-serif; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: calc(50% - 15px); bottom: 25px; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red); cursor: pointer; z-index: 2; animation: rot linear 4s infinite; }
#prog { --posX: 0px; position: absolute; bottom: 10px; width: 100%; height: 1px; background: #eee; cursor: pointer; }
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 6px); width: 3px; height: 10px; background: silver; }
#tit { position: absolute; bottom: 20px; right: 30px; font: bold 3em sans-serif; color: snow; text-shadow: 2px 2px 3px #212121; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="tit">机<br>器<br>人</div>
<div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
</div>
<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1456419002.mp3';
aud.autoplay = true;
aud.loop = true;
if (aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => aud.play());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);});
let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
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; };
papa.oncontextmenu = () => false;
</script>
本帖演示：纯音乐或不需要歌词同步的音画帖使用线条+小光盘播放控制器
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: snow url('https://638183.freep.cn/638183/t22/webp/robot.webp') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; }
#mplayer { position: absolute; top: 20px; left: 10px; width: 400px; height: 60px; font: normal 14px sans-serif; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: calc(50% - 15px); bottom: 25px; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red); cursor: pointer; z-index: 2; animation: rot linear 4s infinite; }
#prog { --posX: 0px; position: absolute; bottom: 10px; width: 100%; height: 1px; background: #eee; cursor: pointer; }
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 6px); width: 3px; height: 10px; background: silver; }
#tit { position: absolute; bottom: 20px; right: 30px; font: bold 3em sans-serif; color: snow; text-shadow: 2px 2px 3px #212121; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="tit">机<br>器<br>人</div>
<div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
</div>
<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1456419002.mp3';
aud.autoplay = true;
aud.loop = true;
if (aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => aud.play());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);});
let mState = () => btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
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; };
papa.oncontextmenu = () => false;
</script>
线条加光盘也很漂亮的，欣赏黑黑好帖{:4_187:} 找个机器人男朋友，勇猛高大，可以很好地保护那个女孩{:4_173:} 光盘播放器，新颖！漂亮！实用！ 相约爱晚亭 发表于 2022-10-14 10:16
光盘播放器，新颖！漂亮！实用！
还行 红影 发表于 2022-10-14 09:06
线条加光盘也很漂亮的，欣赏黑黑好帖
帖子一般，机器人酷，引领机器人出场的妹子也不差 红影 发表于 2022-10-14 09:06
找个机器人男朋友，勇猛高大，可以很好地保护那个女孩
这姑凉是引领者，就像参加奥运会、亚运会、中运会一样，每只队伍都会有引领者 马黑黑 发表于 2022-10-14 12:45
帖子一般，机器人酷，引领机器人出场的妹子也不差
这机器人肯定很重，摔倒了扶都扶不起来{:4_189:} 马黑黑 发表于 2022-10-14 12:46
这姑凉是引领者，就像参加奥运会、亚运会、中运会一样，每只队伍都会有引领者
还欠着机器人的手呢，猜想机器人一只手就能把她举起来{:4_173:} 红影 发表于 2022-10-14 16:46
还欠着机器人的手呢，猜想机器人一只手就能把她举起来
这个是力量型的机器人 红影 发表于 2022-10-14 16:46
这机器人肯定很重，摔倒了扶都扶不起来
它是不倒翁 马黑黑 发表于 2022-10-14 19:03
这个是力量型的机器人
哦，那看起来能举起10个她来了{:4_173:} 马黑黑 发表于 2022-10-14 19:03
它是不倒翁
忘充电它就废了啊。 红影 发表于 2022-10-14 20:09
忘充电它就废了啊。
机械原理中应用了不倒翁的设计 红影 发表于 2022-10-14 20:09
哦，那看起来能举起10个她来了
都行 马黑黑 发表于 2022-10-14 20:23
机械原理中应用了不倒翁的设计
那应该多设计几条腿{:4_173:} 红影 发表于 2022-10-14 22:22
那应该多设计几条腿
不需要腿。不倒翁是没有腿的 马黑黑 发表于 2022-10-14 22:33
不需要腿。不倒翁是没有腿的
不倒翁下面是圆的，等于全是腿{:4_173:} 红影 发表于 2022-10-14 22:48
不倒翁下面是圆的，等于全是腿
你这理解很怪