朵拉 发表于 2025-7-11 20:53

沦 陷（学习马黑黑Tupac Amaru效果）

<style>
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: #333 url('https://pic1.imgdb.cn/item/687105ec58cb8da5c89d45f0.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; perspective: 500px; z-index: 1; position: relative; --state: running; --z: -300px; }
    #btnFs { left: 15px; 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: .6; pointer-events: none; }
    #lzwrap { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; display: grid; place-items: center; }
    li-zi { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/2025/b2.webp') no-repeat center/cover; cursor: pointer; transform: rotateY(0) translate3d(0, 40px, var(--z)) rotateY(0); animation: runcircle 30s var(--delay) linear infinite var(--state); }
    #player { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/2025/fl102.png') no-repeat center/cover; transform: rotateX(35deg) rotateZ(0); cursor: pointer; animation: rot3d 6s linear infinite var(--state); filter: drop-shadow(0 0 20px #333) opacity(0.8); }
    @keyframes rot3d { to { transform: rotateX(35deg) rotateZ(360deg); backface-visibility: visible; } }
    @keyframes runcircle { to { transform: rotateY(-360deg) translate3d(0, 40px, var(--z)) rotateY(360deg) rotateZ(-10turn); } }
</style>

<div id="papa">
    <audio id="aud" src="https://file.uhsea.com/2507/146ec18494ef1e92a0d29b7ca3a59ccd51.mp3" autoplay="" loop=""></audio>
   
    <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/17/17/27/27/video66978e7fb1c4d.mp4" autoplay loop muted></video>
    <div id="lzwrap">
      <div id="player"></div>
    </div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/FS.js';

    var total = 20;

    Array.from({length: total}).forEach((lz, idx) => {
      lz = document.createElement('li-zi');
      lz.title = 'Alt+X';
      lz.style.cssText += `
            filter: hue-rotate(${360 * Math.random()}deg);
            --delay: -${idx * 30 / total}s;
      `;
      lz.onclick = () => player.click();
      lzwrap.appendChild(lz);
    });

    window.onresize = () => papa.style.setProperty('--z', -300 * papa.clientWidth/1400 + 'px');

    FS(papa, player);
</script>

朵拉 发表于 2025-7-11 20:54

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

红影 发表于 2025-7-11 21:51

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

马黑黑 发表于 2025-7-11 21:54

{:4_199:}
页: [1]
查看完整版本: 沦 陷（学习马黑黑Tupac Amaru效果）