小辣椒 发表于 2022-6-29 21:29

一夜的等待 TO：黑黑（套用黑黑代码）


<style>
.papa { left: -214px; width: 1042px; height: 586px; background: rgba(0,0,0,.6) url('https://wx.ttt.dj/updir/62bc51aab7bf1.gif ') no-repeat center / cover; box-shadow: 0 2px 30px #000; overflow: hidden; position: relative; }
.papa::before { position: absolute; content: ''; width: 1042px; height: 586px; background: url('https://wx.ttt.dj/updir/62bc51886b5a9.jpg') no-repeat center /cover; opacity: 1; }
.papa:hover::before { animation: rot 4s forwards; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; bottom: 50px; right: 710px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: lightgreen; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes rot { to { background-position: -1024px -640px; transform: rotate(2turn); } }
</style>

<div class="papa">
      <div class="playbox">
                <p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0:0 | 0:0</span>
                </p>
      </div>
      <audio id="aud" src="https://wx.ttt.dj/updir/62bc51f60f035.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let slider = document.querySelector('#slider'),
      aud = document.querySelector('#aud'),
      per = document.querySelector('#per'),
      btnplay = document.querySelector('#btnplay'),
      geci = document.querySelector('#geci');
let slip = 0;

let lrcAr = [
                ['0.06','一夜的等待 歌手-辰念/yt'],
        ['20.26',' 帖赠：黑黑'],
       
        ['140.00','一夜的等待']
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
      let prog = 100 * aud.currentTime / aud.duration;
      slider.value = prog;
      per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
      }
});

let toMin = (sec) => {
      if(!sec) return '0:00';
      sec = parseInt(sec);
      return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

小辣椒 发表于 2022-6-29 21:29

@马黑黑

小辣椒 发表于 2022-6-29 21:30

黑黑，等了你一夜{:4_170:}

小辣椒 发表于 2022-6-29 21:31

今天一下子做了2个，那个感觉动图出来有点卡，这个图片小，那个真的花了许多时间，结果卡，发了怕大家打不开{:4_201:}

马黑黑 发表于 2022-6-29 21:55

这是要下水的样纸{:4_170:}

小辣椒 发表于 2022-6-29 21:55

马黑黑 发表于 2022-6-29 21:55
这是要下水的样纸

有点像{:4_170:}

马黑黑 发表于 2022-6-29 21:56

小辣椒 发表于 2022-6-29 21:55
有点像

有啥想不开呢

小辣椒 发表于 2022-6-29 21:57

马黑黑 发表于 2022-6-29 21:56
有啥想不开呢

等了一夜都没有等到{:4_170:}

马黑黑 发表于 2022-6-29 21:57

小辣椒 发表于 2022-6-29 21:57
等了一夜都没有等到

理解，理解

红影 发表于 2022-6-29 21:58

亲爱的动图总是弄得很好看，这个帖子真棒。黑黑收礼开心{:4_187:}

小辣椒 发表于 2022-6-29 21:59

红影 发表于 2022-6-29 21:58
亲爱的动图总是弄得很好看，这个帖子真棒。黑黑收礼开心

亲爱的，都是老图，以前做过的，就现成的

小辣椒 发表于 2022-6-29 22:00

马黑黑 发表于 2022-6-29 21:57
理解，理解

不理解，就是你不善解人意了{:4_189:}

马黑黑 发表于 2022-6-29 22:08

小辣椒 发表于 2022-6-29 22:00
不理解，就是你不善解人意了

但是下水不好，要克制

小辣椒 发表于 2022-6-29 22:28

马黑黑 发表于 2022-6-29 22:08
但是下水不好，要克制

黑黑，我发祝福板块，我自己感觉出来很快，重新上传了一下

马黑黑 发表于 2022-6-29 22:36

小辣椒 发表于 2022-6-29 22:28
黑黑，我发祝福板块，我自己感觉出来很快，重新上传了一下

很快的

红影 发表于 2022-6-30 20:24

小辣椒 发表于 2022-6-29 21:59
亲爱的，都是老图，以前做过的，就现成的

嗯，你玩的多，这方面驾轻就熟{:4_187:}

千羽 发表于 2022-6-30 20:26

这是单图的画面呢，漂亮{:4_187:}

千羽 发表于 2022-6-30 20:27

眼见旋转后不见了……小辣椒学习帖做的真好{:4_199:}

小辣椒 发表于 2022-7-1 18:23

红影 发表于 2022-6-30 20:24
嗯，你玩的多，这方面驾轻就熟

旧图玩玩，不用做图速度快一点

小辣椒 发表于 2022-7-1 18:24

千羽 发表于 2022-6-30 20:26
这是单图的画面呢，漂亮

千羽这个图图真的不能和你比的
页: [1] 2 3
查看完整版本: 一夜的等待 TO：黑黑（套用黑黑代码）