论坛 › 音乐沙龙 › 光辉岁月 TO岁月生日快乐

绿叶清舟 发表于 2023-3-6 13:19

光辉岁月 TO岁月生日快乐

<style>
#papa {
      --state: paused;
      margin: -80px 0 0 calc(50% - 633px);
      display: grid;
      place-items: center;
      width: 1100px;
      height: 700px;
      background: lightblue url('https://pic.imgdb.cn/item/64057423f144a01007d5083d.jpg') no-repeat center/cover;
      box-shadow: 6px 3px 20px #000;
      user-select: none;
      position: relative;
      z-index: 1;
}
#btnFs {
      position: absolute;
      bottom: 20px;
      width: fit-content;
      height: fit-content;
      padding: 6px;
      border-radius: 6px;
      border: 2px solid #ffff3f;
      color: #ffff3f;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
#mplayer {
      position: absolute;
      left: 90%;
      top: 580px;
      width: 50px;
      height: 50px;
      background: hsla(60,75%,100%,.25);
      border-radius: 50%;
      box-shadow:
                0 60px 20px 10px hsla(60,100%,50%,.45),
                0 140px 20px 20px hsla(60,100%,60%,.45),
                0 240px 20px 30px hsla(60,100%,70%,.45),
                0 360px 20px 40px hsla(60,100%,80%,.45),
                0 500px 20px 50px hsla(60,100%,90%,.45);
      transform: rotate(130deg);
      animation: rot 3s ease-in-out infinite alternate var(--state);
      cursor: pointer;
}
#mplayer::before {
      position: absolute;
      content: '';
      left: -20px;
      width: 100px;
      height:580px;
}

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

<div id="papa">
      <div id="mplayer"></div>
      <div id="btnFs">全屏观赏</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=346081.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let fs = false, timerId;
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('ended', () => playNext());
      papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
      });
      btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
      document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

小辣椒 发表于 2023-3-6 13:27

岁月的沙发，我不

小辣椒 发表于 2023-3-6 13:32

欣赏清舟的精美贺帖{:4_199:}
同祝岁月生日快乐！

走过岁月 发表于 2023-3-6 13:33

小辣椒 发表于 2023-3-6 13:27
岁月的沙发，我不

一起坐

走过岁月 发表于 2023-3-6 13:33

谢谢清舟的祝福，好开心！

走过岁月 发表于 2023-3-6 13:36

光辉的岁月很给力，谢谢清舟

走过岁月 发表于 2023-3-6 13:36

小辣椒 发表于 2023-3-6 13:32
欣赏清舟的精美贺帖
同祝岁月生日快乐！

谢谢小辣椒，一起同乐！

小辣椒 发表于 2023-3-6 13:41

走过岁月 发表于 2023-3-6 13:33
一起坐

好啊，这样可以多吃蛋糕{:4_177:}

庶民 发表于 2023-3-6 14:13

祝福生日快乐。

大猫咪 发表于 2023-3-6 14:14

岁月过生日了啊{:5_151:} {:4_187:}借清舟美帖同祝岁月兄弟生日快乐！事事顺心，幸福安康！

{:5_166:}{:5_166:}{:4_191:}{:4_176:}{:4_179:}{:4_204:}{:5_161:}

梦油 发表于 2023-3-6 15:16

借清舟美帖祝岁月生日快乐。

红影 发表于 2023-3-6 16:05

清舟的构思巧妙，把那串糖葫芦一样的光圈挂在一盏灯上了，太棒了。{:4_199:}
岁月收礼开心，生日快乐{:4_187:}

梦缘 发表于 2023-3-6 20:34

真帖切的祝福，欣赏问好！{:4_204:}

走过岁月 发表于 2023-3-7 15:00

庶民 发表于 2023-3-6 14:13
祝福生日快乐。

谢谢庶民的祝福

走过岁月 发表于 2023-3-7 15:01

大猫咪 发表于 2023-3-6 14:14
岁月过生日了啊 借清舟美帖同祝岁月兄弟生日快乐！事事顺心，幸福安康！

{: ...

谢谢大猫兄的祝福

走过岁月 发表于 2023-3-7 15:01

梦油 发表于 2023-3-6 15:16
借清舟美帖祝岁月生日快乐。

谢谢梦油的祝福

走过岁月 发表于 2023-3-7 15:01

红影 发表于 2023-3-6 16:05
清舟的构思巧妙，把那串糖葫芦一样的光圈挂在一盏灯上了，太棒了。
岁月收礼开心，生日快乐{:4_1 ...

谢谢影子的祝福

走过岁月 发表于 2023-3-7 15:01

梦缘 发表于 2023-3-6 20:34
真帖切的祝福，欣赏问好！

谢谢梦缘的祝福

梦油 发表于 2023-3-7 15:13

走过岁月 发表于 2023-3-7 15:01
谢谢梦油的祝福

别客气。

红影 发表于 2023-3-7 22:25

走过岁月 发表于 2023-3-7 15:01
谢谢影子的祝福

不客气，再祝岁月生日快乐{:4_187:}

查看完整版本: 光辉岁月 TO岁月生日快乐