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

Molde Canticle（学习马黑黑外面的宇宙效果）

<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/c08095368021ef289596a6d2d133033c.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; top: 180px; left: 82px; bottom: 120px; aspect-ratio: 1/1; width: 15%; display: grid; place-items: center; animation: rot 12s linear infinite var(--state); transition: 0.6s; cursor: pointer; }
    li-zi { position: absolute; aspect-ratio: 1/1; width: 15%; border-radius: 50%; background: radial-gradient(circle at 10%, var(--c1), var(--c2)); box-shadow: inset 4px 4px 16px gray; transform: rotate(var(--a)) translate(var(--r)); transition: 0.7s; }
    #btnFs { bottom: 20px; color: #eee; }
    .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; pointer-events: none; }
    @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
    <audio id="aud" src="https://cccimg.com/view.php/8a2e675bff51f57111c265cec517b6c8.mp3" autoplay="" loop=""></audio>
   
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/04/03/07/video63641e7be0306.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 posdata = , lzAr = [];

    posdata.forEach( (pos, posIdx) => {
      Array.from({ length: pos }).forEach( (lz, lzIdx) => {
            lz = document.createElement('li-zi');
            const a = lzIdx * 360 / pos, r = posIdx * player.clientWidth / (posdata.length + 1);
            lz.style.cssText += `
                --c1: #${Math.random().toString(16).substring(2, 8)};
                --c2: #${Math.random().toString(16).substring(2, 8)};
                --r: ${r}px;
                --a: ${a}deg;
            `;
            lzAr.push({elm: lz, r: r, idx: posIdx});
            player.appendChild(lz);
      });
    });

    aud.ontimeupdate = () => flash();

    window.onresize = () => {
      lzAr.forEach(lz => lz.elm.style.setProperty('--r', `${lz.idx * player.clientWidth / (posdata.length + 1)}px`));
    };

    function flash() {
      player.style.setProperty('filter', `hue-rotate(${360 * Math.random()}deg)`);
    }
</script>

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

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

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

{:4_199:}

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

问好朵拉老师，谢谢精彩分享！{:4_187:}

红影 发表于 2025-7-20 11:40

漂亮。欣赏朵宝好帖{:4_199:}

红影 发表于 2025-7-20 11:48

这音乐十分好听，哼唱的旋律很入心。
页: [1]
查看完整版本: Molde Canticle（学习马黑黑外面的宇宙效果）