论坛 › 欢乐水吧 › 졸려 - (瞌睡) TO：马黑黑

朵拉 发表于 2023-8-25 19:15

졸려 - (瞌睡) TO：马黑黑

本帖最后由 朵拉 于 2023-8-25 19:45 编辑 <br /><br /><style>
#mplayer {
      margin: 20px auto;
      width: 200px;
      height: 120px;
      background: linear-gradient(tan,navy,transparent);
      box-shadow: 0 0 8px #666, 0 0 50px #999 inset, 0 0 20px #666;
      color: antiquewhite;
      display: grid;
      place-items: center;
      position: relative;
      --prg: 25%; --state: paused;
}
#mplayer > span { position: absolute; }
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
}
#mplayer::before {
      left: 6px;
      top: 6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: gray;
      box-shadow: 178px 0 0 gray, 0 98px 0 0 gray, 178px 98px 0 0 gray;
}
/*
#mplayer::after {
      width: 78px;
      height: 24px;
      border-radius: 24px;
      background: lightgray;
}
*/
#btnP1, #btnP2 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid silver;
      display: grid;
      place-items: center;
      cursor: pointer;
      animation: rot 5s infinite linear var(--state);
}
#btnP1 {
      left: 20px;
      background: gray radial-gradient(
                transparent,
                transparent 20%,
                #000 calc(20% + 1px),
                #000 calc(100% - var(--prg)),
                transparent calc(100% - var(--prg) + 1px),
                transparent 0
      );
}
#btnP2 {
      right: 20px;
      background: gray radial-gradient(
                transparent,
                transparent 20%,
                #000 calc(20% + 1px),
                #000 var(--prg),
                transparent calc(var(--prg) + 1px),
                transparent 0
      );
}
#btnP1::after, #btnP2::after {
      position: absolute;
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px dotted rgba(250,250,250,.7);
}
#titP { top: 10px; font-size: 12px; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mplayer">
      <span id="titP">HCPlayer</span>
      <span id="btnP1"></span>
      <span id="btnP2"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=26093293" loop autoplay></audio>

<script>

let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
      let prg = aud.currentTime / aud.duration * 100 + 20;
      mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

https://pic.imgdb.cn/item/64e89257661c6c8e54046ae2.gif

朵拉 发表于 2023-8-25 19:50

@马黑黑
马师 晚上好，帖子略简单，望您笑纳哈{:4_204:}{:4_190:}

马黑黑 发表于 2023-8-25 20:20

朵拉 发表于 2023-8-25 19:50
@马黑黑
马师 晚上好，帖子略简单，望您笑纳哈

感谢感谢，用心了

亚伦影音工作室 发表于 2023-8-25 20:38

这个动图很可爱！可以通过代码是其得到控制！

红影 发表于 2023-8-25 22:05

这个播放器没放在底图里啊，很有趣的动图。欣赏朵宝好帖{:4_187:}

查看完整版本: 졸려 - (瞌睡) TO：马黑黑