朵拉 发表于 2025-7-16 21:58

醒不来的梦（学习马黑黑Our Eternity效果）

本帖最后由 朵拉 于 2025-7-16 21:59 编辑 <br /><br /><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://cccimg.com/view.php/a747508bcd41681c1f46c3d18dccf1c1.png') 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/2501.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://cccimg.com/view.php/83c5f14ec5446ba65ddb6e8ae6889ad4.mp3" 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 22:00

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

梦江南 发表于 2025-7-17 07:49

欣赏老师的精美制作，问好！

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

漂亮，欣赏朵宝好帖{:4_187:}

梦油 发表于 2025-7-17 11:16

欣赏佳作，问候朵拉。
页: [1]
查看完整版本: 醒不来的梦（学习马黑黑Our Eternity效果）