论坛 › 音乐沙龙 › Rest : Our Eternity 9'28''

马黑黑 发表于 2025-7-16 18:33

Rest : Our Eternity 9'28''

<style>
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://ts1.tc.mm.bing.net/th/id/R-C.4f19e660585af8e1140043315889aace?rik=Z4ig67BB%2baV0HQ&riu=http%3a%2f%2fwww.cntgol.com%2fuploads%2fallimg%2f190927%2f1J4331156-6.jpg&ehk=fwxLCD7likO%2fEL3qFwjQ92XJld5bp73A18eTipS%2b2PM%3d&risl=&pid=ImgRaw&r=0') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
    #player { position: absolute; width: 30%; height: 20%; bottom: 120px; display: inherit; place-items: inherit; filter: drop-shadow(-70px 70px 10px rgba(0,0,0,.25)); }
    #player::before { position: absolute; content: ''; width: 6vw; height: 6vw; background: url('https://638183.freep.cn/638183/small/2025/moon.webp') no-repeat center/cover; transform: skewX(-20deg) rotate(0); animation: rot 8s linear infinite var(--state); cursor: pointer; }
    li-zi {
      position: absolute;
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      background: radial-gradient(at 60% 80%, var(--c1) 1%, var(--c2));
      transform: translate(calc(var(--rx) * cos(var(--deg))), calc(var(--ry) * sin(var(--deg))));
    }
    #btnFs { bottom: 20px; color: white; }
    #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
    @keyframes rot { to { transform: skewX(-20deg) rotate(360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27406622" autoplay loop></audio>
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/01/07/14/36/06/video677ccb560ee8b.mp4" autoplay loop muted></video>
    <div id="player"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(papa, player);

    var total = 12, step = 0.35, lzAr = [], isRun = true, raf;
    var rx = player.clientWidth / 2, ry = player.clientHeight / 2;
    Array.from({ length: total }).forEach( (lz, idx) => {
      lz = document.createElement('li-zi');
      var a = idx * 360 / total;
      lz.style.cssText += `
            --c1: #${Math.random().toString(16).substring(2, 8)};
            --c2: #${Math.random().toString(16).substring(2, 8)};
            --deg: ${a}deg;
            --rx: ${rx}px;
            --ry: ${ry}px;
      `;
      lzAr.push({ elm: lz, a: a});
      player.appendChild(lz);
    });

    aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : circling();

    function circling() {
      cancelAnimationFrame(raf)
      lzAr.forEach((lz, idx) => {
            lz.a = (lz.a + step) % 360;
            lz.elm.style.setProperty('--deg', lz.a + 'deg');
      });
      raf = requestAnimationFrame(circling);
    }
</script>

马黑黑 发表于 2025-7-16 18:33

帖子代码

<style>
/* Rest : Our Eternity 9'28'' */
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://ts1.tc.mm.bing.net/th/id/R-C.4f19e660585af8e1140043315889aace?rik=Z4ig67BB%2baV0HQ&riu=http%3a%2f%2fwww.cntgol.com%2fuploads%2fallimg%2f190927%2f1J4331156-6.jpg&ehk=fwxLCD7likO%2fEL3qFwjQ92XJld5bp73A18eTipS%2b2PM%3d&risl=&pid=ImgRaw&r=0') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
    #player { position: absolute; width: 30%; height: 20%; bottom: 120px; display: inherit; place-items: inherit; filter: drop-shadow(-70px 70px 10px rgba(0,0,0,.25)); }
    #player::before { position: absolute; content: ''; width: 6vw; height: 6vw; background: url('https://638183.freep.cn/638183/small/2025/moon.webp') no-repeat center/cover; transform: skewX(-20deg) rotate(0); animation: rot 8s linear infinite var(--state); cursor: pointer; }
    li-zi {
      position: absolute;
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      background: radial-gradient(at 60% 80%, var(--c1) 1%, var(--c2));
      transform: translate(calc(var(--rx) * cos(var(--deg))), calc(var(--ry) * sin(var(--deg))));
    }
    #btnFs { bottom: 20px; color: white; }
    #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
    @keyframes rot { to { transform: skewX(-20deg) rotate(360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27406622" autoplay loop></audio>
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/01/07/14/36/06/video677ccb560ee8b.mp4" autoplay loop muted></video>
    <div id="player"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(papa, player);

    var total = 12, step = 0.35, lzAr = [], isRun = true, raf;
    var rx = player.clientWidth / 2, ry = player.clientHeight / 2;
    Array.from({ length: total }).forEach( (lz, idx) => {
      lz = document.createElement('li-zi');
      var a = idx * 360 / total;
      lz.style.cssText += `
            --c1: #${Math.random().toString(16).substring(2, 8)};
            --c2: #${Math.random().toString(16).substring(2, 8)};
            --deg: ${a}deg;
            --rx: ${rx}px;
            --ry: ${ry}px;
      `;
      lzAr.push({ elm: lz, a: a});
      player.appendChild(lz);
    });

    aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : circling();

    function circling() {
      cancelAnimationFrame(raf)
      lzAr.forEach((lz, idx) => {
            lz.a = (lz.a + step) % 360;
            lz.elm.style.setProperty('--deg', lz.a + 'deg');
      });
      raf = requestAnimationFrame(circling);
    }
</script>

梦江南 发表于 2025-7-16 18:49

欣赏老师的精彩小播放器。祝夏安！

马黑黑 发表于 2025-7-16 18:53

梦江南 发表于 2025-7-16 18:49
欣赏老师的精彩小播放器。祝夏安！

{:4_190:}

杨帆 发表于 2025-7-16 21:02

制作靓丽，效果精美，谢谢老师经典分享{:4_190:}

马黑黑 发表于 2025-7-16 21:55

杨帆 发表于 2025-7-16 21:02
制作靓丽，效果精美，谢谢老师经典分享

{:4_191:}

朵拉 发表于 2025-7-16 22:01

效果漂亮，学生已交作业，请老师指正{:4_190:}

红影 发表于 2025-7-17 10:57

粒子的色彩设计很奇妙，这个视频的选择也很奇妙。{:4_199:}

马黑黑 发表于 2025-7-17 18:09

红影 发表于 2025-7-17 10:57
粒子的色彩设计很奇妙，这个视频的选择也很奇妙。

{:4_190:}

红影 发表于 2025-7-17 21:48

马黑黑 发表于 2025-7-17 18:09


阴影造成了奇妙的效果{:4_187:}

马黑黑 发表于 2025-7-17 21:48

红影 发表于 2025-7-17 21:48
阴影造成了奇妙的效果

还好

红影 发表于 2025-7-17 22:09

马黑黑 发表于 2025-7-17 21:48
还好

小球的色彩设置也很别致。

马黑黑 发表于 2025-7-17 22:48

红影 发表于 2025-7-17 22:09
小球的色彩设置也很别致。

这是径向渐变，设置一下 at

红影 发表于 2025-7-18 20:59

马黑黑 发表于 2025-7-17 22:48
这是径向渐变，设置一下 at

嗯嗯，这样圆心点就不一样了。

马黑黑 发表于 2025-7-18 21:24

红影 发表于 2025-7-18 20:59
嗯嗯，这样圆心点就不一样了。

这个以前介绍过的

红影 发表于 2025-7-18 21:59

马黑黑 发表于 2025-7-18 21:24
这个以前介绍过的

没特别留意，在这个例子里很清晰。

马黑黑 发表于 2025-7-19 12:48

红影 发表于 2025-7-18 21:59
没特别留意，在这个例子里很清晰。

额

红影 发表于 2025-7-19 21:39

马黑黑 发表于 2025-7-19 12:48
额

这个贴子里的粒子里的颜色特点进来就看到了{:4_204:}

马黑黑 发表于 2025-7-19 23:50

红影 发表于 2025-7-19 21:39
这个贴子里的粒子里的颜色特点进来就看到了

酱紫呀

红影 发表于 2025-7-20 14:08

马黑黑 发表于 2025-7-19 23:50
酱紫呀

特别好看{:4_187:}

查看完整版本: Rest : Our Eternity 9'28''