朵拉 发表于 2025-7-19 20:17

爱的主打歌（学习马黑黑Mendre效果）

<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://cccimg.com/view.php/1cab0a318509ec8bb81ada970559c243.jpg') 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; bottom: 100px; aspect-ratio: 1/1; width: 16%; transform-style: preserve-3d; cursor: pointer; border-radius: 50%; background: radial-gradient(#813c85 , transparent); }
.ring { position: absolute; width: 100%; height: 100%; border: 1px solid var(--cc); border-radius: 50%; transform: translateZ(-30px) rotateY(var(--ay)) rotateX(var(--ax)); }
      #btnFs { bottom: 20px; color: #eee; }
      .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, pink); -webkit-mask: radial-gradient(transparent 20%, pink); opacity: .8; pointer-events: none; }
      @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
      <audio id="aud" src="https://cccimg.com/view.php/01767099001823233a0f9ab3e30b98af.mp3" autoplay="" loop=""></audio>
      
      <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/12/36/49/video67e0e161531bc.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 = 20, rings = [], raf;
      Array.from({length: total}).forEach( (d,k) => {
                d = document.createElement('div');
                d.className = 'ring';
                const a = k * 360 / total;
                d.style.cssText += `
                        --ax: ${a}deg;
                        --ay:${a}deg;
                        --cc: #${Math.random().toString(16).substring(2,8)};
                `;
                rings.push({ elm: d, a: a });
                player.appendChild(d);
      });

      const animate = () => {
                cancelAnimationFrame(raf);
                rings.forEach( (d, k) => {
                        d.a = (d.a + 1) % 360;
                        d.elm.style.setProperty('--ax', d.a + 'deg');
                        d.elm.style.setProperty('--ay', d.a + 'deg');
                });
                raf = requestAnimationFrame(animate);
      };

      aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : animate();
</script>

朵拉 发表于 2025-7-19 20:18

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

马黑黑 发表于 2025-7-19 20:42

{:4_199:}

红影 发表于 2025-7-19 20:56

朵宝真快。欣赏朵宝好帖{:4_199:}

梦江南 发表于 2025-7-20 08:55

欣赏朵拉老师的精彩制作。问好！{:4_187:}
页: [1]
查看完整版本: 爱的主打歌（学习马黑黑Mendre效果）