小辣椒 发表于 2023-8-5 13:22

爱已结束 - 梦然 (Miya)


<style>
#papa {
      margin: 150px 0 0 calc(50% - 795px);
      width: 1400px;
      height: 750px;
      background: gray url('https://xlaj.cn/assets/file/zp/20230720003947.gif') no-repeat center/cover;
      display: grid;
      place-items: center;
      box-shadow: 3px 3px 20px #000;
      user-select: none;
      overflow: hidden;
      perspective: 1000px;
      position: relative;
      z-index: 1;
}

#mplayer {
      position: absolute;
      bottom: 30px; left: 500px;
      grid-template-columns: auto auto auto;
      gap: 6px;
      display: grid;
      place-items: center;
      font: normal 16px sans-serif;
      color: snow;
      z-index: 999;
}

#btnplay {
      margin-right: -4px;
      width: 40px;
      height: 40px;

      font: bold 40px/40px serif;
      text-align: center;
      cursor: pointer;
      animation: rot 4s infinite linear;
      animation-play-state: var(--state);
      --state: paused;
}

#prog {
      width: 200px;
      height: 25px;
      cursor: pointer;
}

#lrc {
      --state: running;
      --motion: cover2;
      --tt: 1s;
      position: absolute;
      left: 280px;
      top: 80px;
      font: bold 2.4em sans-serif;
      color: hsl(240, 50%, 90%);
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(30, 10%, 10%, .95));
      z-index: 1000;
}

#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: nowrap;
      background: linear-gradient(180deg, hsla(240, 60%, 50%, .45), hsla(240, 100%, 60%, .75));
      filter: inherit;
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
.star {
      --rr: 300px;
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50% 50% 25% 50%;
      transform-origin: 50% 50%;
      transform-style: preserve-3d;
      opacity: .60;
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes fly { to { transform: rotate(0) translate(0); } }
</style>

<div id="papa">
      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <div id="mplayer">
                <span id="btnplay">☀</span>
                <meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
                <span id="tmsg">00:00 | 00:00</span>
      </div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230702141446.mp3" loop autoplay></audio>

<script>
(function() {
let mKey = 0, mSeek = false, mFlag = true;
       let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

      (function() {
                Array.from({length: 120}).forEach((item,key) => {
                        item = document.createElement('span');
                        item.className = 'star';
                        let ww = Math.ceil(Math.random() * 20) | 10;
                        item.style.cssText += `
                              width: ${ww}px;
                              height: ${ww}px;
                              left: ${Math.random()*10 + 200}px;
                              top: ${Math.random()*0 + 150}px;
                              background: hsla(${360*Math.random()},100%,50%,.75);
                              transform: rotate(${Math.random() * 720}deg) translate3d(${Math.random() * 500}px,${Math.random() * 300}px,${Math.random() * 1000}px);
                              animation: fly 80s infinite ${-10 - Math.random() * 20}s linear;
                        `;
                        papa.appendChild(item);
                });
      })();
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {
                prog.value = aud.currentTime / aud.duration * 100;
                tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
      let mState = () => aud.paused ? (btnplay.style.setProperty('--state', 'paused'), lrc.style.setProperty('--state', 'paused')) : (btnplay.style.setProperty('--state', 'running'), lrc.style.setProperty('--state', 'running'));
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
      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;};
})();
</script>
<br><br>

小辣椒 发表于 2023-8-5 13:23

继续复习前面学习过的播放器@马黑黑

小辣椒 发表于 2023-8-5 13:25

这个图图想不出上什么歌曲，其实这首梦然的爱已结束 也是与图图不怎么相符，只是感觉这歌蛮好听的{:4_173:}

醉美水芙蓉 发表于 2023-8-5 14:11

红影 发表于 2023-8-5 15:00

这个背景是灯光效果吧，特别漂亮。欣赏亲爱的好帖{:4_199:}

马黑黑 发表于 2023-8-5 15:59

game over {:4_170:}

花飞飞 发表于 2023-8-5 18:24

这个粒子长得像气球一样，漂亮。。。{:4_187:}
这个是旧的小播么，还没用过。。

小文 发表于 2023-8-5 19:07

真美

风中飞尘 发表于 2023-8-5 19:33

歌曲伤感

小辣椒 发表于 2023-8-5 21:22

醉美水芙蓉 发表于 2023-8-5 14:11
小辣椒的特效好多！

谢谢水芙蓉欣赏{:4_187:}

小辣椒 发表于 2023-8-5 21:23

红影 发表于 2023-8-5 15:00
这个背景是灯光效果吧，特别漂亮。欣赏亲爱的好帖

背景是闪动效果

小辣椒 发表于 2023-8-5 21:25

马黑黑 发表于 2023-8-5 15:59
game over

看看背景图不像的，亲密无暇的{:4_170:}

小辣椒 发表于 2023-8-5 21:26

花飞飞 发表于 2023-8-5 18:24
这个粒子长得像气球一样，漂亮。。。
这个是旧的小播么，还没用过。。

现在我都复习以前教过的播放器{:4_173:}

小辣椒 发表于 2023-8-5 21:26

小文 发表于 2023-8-5 19:07
真美

谢谢小文欣赏{:4_187:}

小辣椒 发表于 2023-8-5 21:26

风中飞尘 发表于 2023-8-5 19:33
歌曲伤感

谢谢小风欣赏{:4_187:}

花飞飞 发表于 2023-8-5 21:33

小辣椒 发表于 2023-8-5 21:26
现在我都复习以前教过的播放器

好的
以后有机会也拿来用用。。
新的有几个还没练过。。{:4_187:}

亚伦影音工作室 发表于 2023-8-5 22:25

尝试一键控制这个精美动图就更好了！

小辣椒 发表于 2023-8-5 22:29

亚伦影音工作室 发表于 2023-8-5 22:25
尝试一键控制这个精美动图就更好了！
你给我修改。我自己不会{:4_173:}
但歌词同步我想用现在的卡拉OK、的模式，我一直改不好

亚伦影音工作室 发表于 2023-8-5 22:45

小辣椒 发表于 2023-8-5 22:29
你给我修改。我自己不会
但歌词同步我想用现在的卡拉OK、的模式，我一直改不好

没问题的，这个歌词同步很准确！

红影 发表于 2023-8-5 23:16

小辣椒 发表于 2023-8-5 21:23
背景是闪动效果

很漂亮，人物身上的光线跟那些远处的灯光相互交映，如梦似幻{:4_187:}
页: [1] 2 3
查看完整版本: 爱已结束 - 梦然 (Miya)