朵拉 发表于 2023-5-23 19:57

松烟入墨（马黑黑原创）

<style>
#mplayer {
      width: 100px;
      height: 160px;
      color: lightblue;
      font-size: 14px;
      background: linear-gradient(to right bottom,black,tan);
      border-radius: 4px;
      box-shadow: 2px 2px 6px black;
      transition: .6s;
      position: absolute;
      pointer-events: none;
      --state: running;
}
#mplayer::before {
      position: absolute;
      content: '';
      width: 30px;
      height: 30px;
      left: calc(50% - 15px);
      bottom: 15px;
      border-radius: 50%;
      background: #333;
      pointer-events: auto;
      cursor: pointer;
      border: 2px solid lightblue;
      box-shadow: 0 0 10px white inset, 0 0 10px white;
      animation: flash .3s infinite alternate var(--state);
}
.wrap {
      position: absolute;
      background: #333;
      padding: 6px;
      top: 6px; right: 6px; bottom: 60px; left: 6px;
      overflow: hidden;
}
#tit {
      position: absolute;
      white-space: nowrap;
      animation: fly 6s linear infinite var(--state);
}
#ttmsg {
      position: absolute;
      top: 36px; right: 6px; bottom: 60px; left: 6px;
      background: #333;
      text-align: center;
      padding: 4px;
}
@keyframes fly { to { transform: translate(-150%); } }
@keyframes flash { to { box-shadow: 0 0 50px #333 inset, 0 0 10px white; } }
</style>

<div id="mplayer">
      <div class="wrap">
                <span id="tit">松烟入墨—Winky诗</span>
                <span id="ttmsg">00:00<br>00:00</span>
      </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28765208" autoplay loop></audio>

<script>
tit.style.right = -1*tit.offsetWidth + 'px';
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 mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => ttmsg.innerHTML = toMin(aud.duration) + '<br>' + toMin(aud.currentTime));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

朵拉 发表于 2023-5-23 19:58

@马黑黑
马师 晚上好，学生交作业，请指正{:4_190:}

马黑黑 发表于 2023-5-23 20:46

这个看着亲切

红影 发表于 2023-5-23 21:57

就是播放器么？没放入帖子里啊。欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 松烟入墨（马黑黑原创）