傲雷影儿 发表于 2025-8-11 14:06

【影.学图】莲的心事（学习马黑黑老师‘寂’代码效果）

本帖最后由 傲雷影儿 于 2025-8-11 14:32 编辑 <br /><br />
莲的心事（学习马黑黑老师‘寂’代码效果）<br>

制作/傲雷影儿<br>

<style>
    #papa { margin: 30px 0; left: calc(50% - 61px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://www.junzhuan.com/data/attachment/album/202508/11/133115cgx77kgvuexvhbei.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; --r: 2vw; --size: 10vw; }
    #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; }
    #player { --size: 30vw; position: absolute; top: 10%; width: var(--size); height: var(--size); filter: drop-shadow(-4px -4px 12px gray); cursor: pointer; pointer-events: none; perspective: 600px; perspective-origin: 0 0; transform-style: preserve-3d; }
    #player::before, #player::after { position: absolute; content: ''; left: 30%; top: calc(50% - 80px); width: 160px; height: 160px; background: url('https://www.junzhuan.com/data/attachment/album/202508/11/133105nsbjh188e6hq6boj.png') no-repeat center/cover; pointer-events: auto; transform: rotateX(-15deg) rotateZ(calc(-1 * var(--deg))); }
    #player::after { left: 70%; z-index: -1; }
    li-zi { position: absolute; width: 60px; height: 60px; background: url('https://www.junzhuan.com/data/attachment/album/202508/11/133105nsbjh188e6hq6boj.png') no-repeat center/cover; transform: rotateY(var(--deg)) translate3d(0, var(--y), var(--r)) rotateY(calc(-1 * var(--deg))) rotateZ(var(--deg)); pointer-events: auto; }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1890235384" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/04/57/90/6490fb3b722ba.mp4" autoplay loop muted></video>
    <div id="player" title="播放/暂停"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(papa, player);
   
    var lzAr = [], total = 100, step = 0.15, rtime;

    createLZ(player, total, 30);
    player.onclick = () => aud.paused ? aud.play() : aud.pause();
    aud.onplaying = aud.onpause = () => rState();

    function createLZ(parent, num, size) {
      Array.from({length: num}).forEach((lz,idx) => {
            lz = document.createElement('li-zi');
            var angle = 360 / num * idx;
            var r = (player.clientWidth - size) / 2 + size / 2;
            lz.style.cssText += `
                width: ${size}px;
                height: ${size}px;
                left: calc(50% - ${size / 2}px);
                top: 20%; //calc(50% - ${size / 2}px);
                filter: hue-rotate(${Math.random() * 360}deg);
                --y: ${Math.random() * 100}px;
                --deg: ${angle}deg;
                --r: ${r}px;
            `;
            lzAr.push({elm: lz, a: angle});
            parent.appendChild(lz);
      });
      lzAr.push({elm: player, a: 0});
    }

    function animate() {
      cancelAnimationFrame(rtime);
      rtime = requestAnimationFrame(animate);
      lzAr.forEach(obj => {
            obj.elm.style.setProperty('--deg', obj.a + 'deg');
            obj.a = (obj.a - step) % 360;
      });
    }

    function rState() {
      aud.paused ? cancelAnimationFrame(rtime) : animate();
    }
</script>


傲雷影儿 发表于 2025-8-11 14:07

请问马黑黑老师，特效水印如何消去？影儿愚钝，望指教，谢谢{:5_110:}

梦油 发表于 2025-8-11 14:29

欣赏精彩，问候影儿。

红影 发表于 2025-8-11 15:14

漂亮的播放器效果，好美的荷花。
只是位置还需调整一下，遮挡了人物面部呢。{:4_204:}

红影 发表于 2025-8-11 15:14

欣赏傲雷影儿好帖{:4_187:}

傲雷影儿 发表于 2025-8-11 15:46

红影 发表于 2025-8-11 15:14
欣赏傲雷影儿好帖

请问影管，播放器位置如何调整，影儿愚钝，望指教{:5_111:}

驻在平安夜前夕 发表于 2025-8-11 16:29

靓{:5_116:}

红影 发表于 2025-8-11 17:40

傲雷影儿 发表于 2025-8-11 15:46
请问影管，播放器位置如何调整，影儿愚钝，望指教

在播放器代码里加入left top 等定位控制，就可以移动它的位置了。
页: [1]
查看完整版本: 【影.学图】莲的心事（学习马黑黑老师‘寂’代码效果）