论坛 › 【清音倚栏】 › 简 单 爱 TO：论坛朋友们七夕节快乐

朵拉 发表于 2024-8-10 20:03

简 单 爱 TO：论坛朋友们七夕节快乐

<style>
#mydiv {
      margin: 250px 0 0 calc(50% - 900px);
      width: 1650px;
      height: 800px;
      background: gray url('https://pic.imgdb.cn/item/66b749d2d9c307b7e9e6bbb0.jpg') no-repeat center/cover;
      display: grid;
      place-items: center;
      box-shadow: 3px 3px 20px #000;
      perspective: 1000px;
      overflow: hidden;
      user-select: none;
      position: relative;
      z-index: 1;
}
#mplayer {
      position: absolute;
      bottom: 20px;
      grid-template-columns: auto auto auto;
      gap: 6px;
      display: grid;
      place-items: center;
      color: hsl(0, 100%, 100%);
      font: normal 16px sans-serif;
      z-index: 999;
}
#btnplay {
      --state: paused;
      margin-right: -4px;
      width: 30px;
      height: 30px;
      font: bold 30px/30px serif;
      text-align: center;
      cursor: pointer;
      animation: rot 4s infinite linear;
      animation-play-state: var(--state);
}
#prog {
      width: 500px;
      height: 8px;
      opacity: .35;
      cursor: pointer;
}
.stars {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 15%;
      background: silver;
      transform-style: preserve-3d;
      animation: rotate 10s infinite ease-in-out;
}
@keyframes rotate {
    0% {
      transform: rotateY(-45deg);
    }
    50% {
      transform: rotateY(45deg);
    }
    100% {
      transform: rotateY(-45deg);
    }
}
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>

<div id="mydiv">
      <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="http://wp.lsjwldx.com/myfile/%E6%9C%B5%E6%8B%89/yinpin.mp3" loop autoplay></audio>

<script>
(function() {
      (function() {
                for(j=10; j<65; j++) {
                        let ele = document.createElement('span');
                        ele.className = 'stars';
                        ele.style.cssText += `
                              left: ${Math.random() * 400 + 900}px;
                              top: ${Math.random() * 80 +500}px;
                              background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
                              box-shadow: 0 0 5px hsla(0,10%,100%,.25);
                              transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
                              animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
                        `;
                        mydiv.appendChild(ele);
                }
      })();
      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', () => aud.play());
      aud.addEventListener('timeupdate', () => {
                prog.value = aud.currentTime / aud.duration * 100;
                tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
      });
      let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      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><br><br><br><br><br><br><br><br>

朵拉 发表于 2024-8-10 20:03

萨克斯版简单爱，祝论坛朋友们 七夕节快乐

凤舞九天 发表于 2024-8-10 21:52

我本来今天也想发这歌来着，看你发了还挺惊喜;P

朵拉 发表于 2024-8-10 22:02

凤舞九天 发表于 2024-8-10 21:52
我本来今天也想发这歌来着，看你发了还挺惊喜

问好凤舞老师，七夕节快乐

凤舞九天 发表于 2024-8-11 12:06

朵拉 发表于 2024-8-10 22:02
问好凤舞老师，七夕节快乐

七夕快乐！{:1_293:}

澜天 发表于 2024-8-14 16:32

这男孩子一脸的陶醉
很幸福的样子

诺北 发表于 2024-8-16 12:14

小朵拉，同快乐啊

诺北 发表于 2024-8-16 12:14

这图做的真漂亮，很配这首歌耶

查看完整版本: 简 单 爱 TO：论坛朋友们七夕节快乐