绿叶清舟 发表于 2023-8-12 10:19

拥有 - 张学友


<style>
#papa { margin: 0 0 0 calc(50% - 633px); width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/64d6ebb01ddac507cc855c03.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; display: grid; place-items: center; }
#prog { position: absolute; bottom: 20px; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; }
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); }
#btnplay { position: absolute; top: -50px; width: 38px; height: 38px; background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -4px -9px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
    <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
      <span id="btnplay" title="播放/暂停"></span>
      <span id="slider"></span>
    </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=189780" autoplay loop></audio>

<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>

梦油 发表于 2023-8-12 10:27

清舟朋友早晨好！谢谢，分享了。

绿叶清舟 发表于 2023-8-12 10:29

梦油 发表于 2023-8-12 10:27
清舟朋友早晨好！谢谢，分享了。

梦油早上好，好久不见了{:4_173:}

红影 发表于 2023-8-12 10:48

清舟来了，看到你好开心，好久没见了{:4_179:}

红影 发表于 2023-8-12 10:49

家里装修如何？清舟肯定已经《拥有》了一个最美的家了{:4_187:}

小辣椒 发表于 2023-8-12 11:14

清舟的图图一如既往的玩自己的风格{:4_199:}

小辣椒 发表于 2023-8-12 11:16

这个美女的脸色特别艳，怕难为情了{:4_189:}

梦油 发表于 2023-8-12 11:29

绿叶清舟 发表于 2023-8-12 10:29
梦油早上好，好久不见了

是啊，思念我们的清舟朋友啊！

醉美水芙蓉 发表于 2023-8-12 17:02

绿叶清舟 发表于 2023-8-13 14:39

醉美水芙蓉 发表于 2023-8-12 17:02
欣赏清舟美女佳作！

谢谢芙蓉，周末快乐

绿叶清舟 发表于 2023-8-13 14:39

梦油 发表于 2023-8-12 11:29
是啊，思念我们的清舟朋友啊！

也想你们啊{:4_190:}

绿叶清舟 发表于 2023-8-13 14:40

小辣椒 发表于 2023-8-12 11:14
清舟的图图一如既往的玩自己的风格

谢谢辣椒，只会做这种的啊{:4_189:}

绿叶清舟 发表于 2023-8-13 14:40

小辣椒 发表于 2023-8-12 11:16
这个美女的脸色特别艳，怕难为情了

也许是喝高了呢{:4_189:}

绿叶清舟 发表于 2023-8-13 14:41

红影 发表于 2023-8-12 10:49
家里装修如何？清舟肯定已经《拥有》了一个最美的家了

谢谢影，还没有了，刚租的房间，要啥啥没有的{:4_189:}

绿叶清舟 发表于 2023-8-13 14:42

红影 发表于 2023-8-12 10:48
清舟来了，看到你好开心，好久没见了

影周末好，也想你们了{:4_179:}

红影 发表于 2023-8-13 15:20

绿叶清舟 发表于 2023-8-13 14:41
谢谢影，还没有了，刚租的房间，要啥啥没有的

好像有点时间了呢，还没弄好啊。清舟辛苦了，弄房子是最操心的事呢{:4_179:}

红影 发表于 2023-8-13 15:20

绿叶清舟 发表于 2023-8-13 14:42
影周末好，也想你们了

清舟的帖子一如既往的色彩很奇妙{:4_187:}

梦油 发表于 2023-8-13 17:06

绿叶清舟 发表于 2023-8-13 14:39
也想你们啊

希望天天看到你。
页: [1]
查看完整版本: 拥有 - 张学友