论坛 › 音乐沙龙 › 又十年 TO友昕

绿叶清舟 发表于 2023-2-28 12:12

又十年 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/63fb5201f144a01007536a64.jpg') no-repeat center/cover;
      box-shadow: 6px 3px 20px #000;
      user-select: none;
      position: relative;
      z-index: 1;
}
#mplayer {
      position: absolute;
      width: fit-content;
      height: fit-content;
      top: 660px;
      left: 600px;
      cursor: pointer;
}
.ball {
      margin: 2px;
      width: 10px;
      height: 10px;
      border-radius: 30%;
      background: #1a2020;
      opacity:.45;
      position: relative;
      display: inline-block;
      box-shadow: -4px -4px 4px #56747f;
}
#btnFs {
      position: absolute;
      bottom: 20px;
      width: fit-content;
      height: fit-content;
      padding: 6px;
      border-radius: 6px;
      border: 2px solid snow;
      color: snow;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
@keyframes flash { to { box-shadow: 0 0 20px 10px #56747f, -2px -2px 8px snow inset; } }
</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=2024611328.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let total = 26, fs = false, timerId;
      for(i = 0; i < total; i++) {
                let span = document.createElement('span');
                span.className = 'ball';
                span.style.cssText += `
                        animation: flash ${Math.random()}s infinite alternate var(--state);
                `;
                mplayer.appendChild(span);
      }
      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());
      aud.addEventListener('error', () => {
                if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/02/28/466426af58d0bcacee07591638ed5f9a.mp3';
      });      
      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-2-28 12:24

构图有独特视角，成品意味深长。播放控制器的修改忠实于图片精神，可谓创意无限。点32个赞。

红影 发表于 2023-2-28 12:43

清舟好快啊，刚看到黑黑的新帖，就看到了清舟的作品，而且这个播放器的色彩和形状调整得更图图特别相配，太赞了{:4_199:}

红影 发表于 2023-2-28 12:46

歌神的图图，友昕的最爱。@友昕收礼开心{:4_187:}

庶民 发表于 2023-2-28 15:11

静静的听，心情得到一次洗礼

梦缘 发表于 2023-2-28 20:52

图意精美，感谢分享啊！{:4_191:}

醉美水芙蓉 发表于 2023-3-2 19:59

绿叶清舟 发表于 2023-3-2 21:07

马黑黑 发表于 2023-2-28 12:24
构图有独特视角，成品意味深长。播放控制器的修改忠实于图片精神，可谓创意无限。点32个赞。

32个是啥讲究的呢

绿叶清舟 发表于 2023-3-2 21:07

醉美水芙蓉 发表于 2023-3-2 19:59
欣赏清舟美贴！

谢谢芙蓉

绿叶清舟 发表于 2023-3-2 21:08

梦缘 发表于 2023-2-28 20:52
图意精美，感谢分享啊！

谢谢梦缘

绿叶清舟 发表于 2023-3-2 21:25

庶民 发表于 2023-2-28 15:11
静静的听，心情得到一次洗礼

谢谢庶民

绿叶清舟 发表于 2023-3-2 21:25

红影 发表于 2023-2-28 12:46
歌神的图图，友昕的最爱。@友昕收礼开心

正好搜到，说是今年新出的

马黑黑 发表于 2023-3-2 22:29

绿叶清舟 发表于 2023-3-2 21:07
32个是啥讲究的呢

习惯

红影 发表于 2023-3-2 22:51

绿叶清舟 发表于 2023-3-2 21:25
正好搜到，说是今年新出的

还挺好听的{:4_187:}

冬天的雨 发表于 2023-3-4 13:36

马黑黑 发表于 2023-2-28 12:24
构图有独特视角，成品意味深长。播放控制器的修改忠实于图片精神，可谓创意无限。点32个赞。

我点64个赞{:4_173:}

马黑黑 发表于 2023-3-4 16:16

冬天的雨 发表于 2023-3-4 13:36
我点64个赞

多了没地方点

友昕 发表于 2023-3-10 19:53

本帖最后由 友昕 于 2023-3-10 19:55 编辑

红影 发表于 2023-2-28 12:46
歌神的图图，友昕的最爱。@友昕收礼开心
谢谢红影，才看到，（老妈又病了，在医院照顾）
似乎是学友的新歌，太棒了，搜一下去{:4_204:}

友昕 发表于 2023-3-10 20:00

才看到，谢谢清舟，迟复为歉（老妈又病了，在医院照顾），
似乎是学友的新歌，真棒！精彩的图片和制作！去搜一下看看歌曲详情，
学友好久没出新歌了 再次感谢清舟！{:4_204:}

绿叶清舟 发表于 2023-3-10 20:19

友昕 发表于 2023-3-10 20:00
才看到，谢谢清舟，迟复为歉（老妈又病了，在医院照顾），
似乎是学友的新歌，真棒！精彩的图片和制作！去 ...

不客气了，想你也是在忙的，老人家还好吧

红影 发表于 2023-3-10 22:19

友昕 发表于 2023-3-10 19:53
谢谢红影，才看到，（老妈又病了，在医院照顾）
似乎是学友的新歌，太棒了，搜一下去

应该谢谢清舟才是呢。令堂的身体怎样了？祝福早日康复{:4_204:}

查看完整版本: 又十年 TO友昕