花飞飞 发表于 2025-8-25 20:26

【黑师代码】将故事写成我们（学习黑师20050727《Purple Magic》花形小播效果）


<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 81px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9; --bg:url('https://642303.freep.cn/642303/za/20250825qixihs02.webp') no-repeat center/cover, url('https://642303.freep.cn/642303/za/IMG_4381.GIF') no-repeat 92% 20%/10% 40%; --mode: screen; background-blend-mode: var(--mode); }
        #player { position: absolute; bottom: -3%; left: -3%; height: 100px; width: 100px; cursor: pointer; transform-style: preserve-3d; animation: rot 6s linear infinite var(--state);}
        li-zi { --hh: 35%; position: absolute; left: -50%; top: calc(50% - var(--hh)); width: 100%; height: var(--hh); background: radial-gradient(circle at 10% 10%, red, purple); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 30px lightblue, 2px 4px 16px rgba(0,0,0,.35); transform-origin: 100% 100%; }
       
        #btnFs { right: 30px; bottom: 30px; color: PINK; }
        .qk-vid {
    top:-26%;
    left:-16%;
    height: 110%;
    opacity: .38;
    -webkit-mask: radial-gradient(circle,cyan, cyan,rgba(0,0,0,.35),transparent, transparent);
    mix-blend-mode: overlay;
}
@keyframes rot {
                to { transform: rotate(1turn); }
</style>

<div id="pa">
        <audio id="audio" src="https://music.163.com/song/media/outer/url?id=186583" autoplay loop></audio>
        <video class="qk-vid" src="https://img.tukuppt.com/video_show/2269348/00/16/28/5e9d069a22eb8.mp4" autoplay loop muted></video>
        <div id="player"></div>
       
       
</div>

<script type="module">
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        const tt = 12;
        Array.from({length: tt}).forEach( (lz,idx) => {
                lz = document.createElement('li-zi');
                lz.style.cssText += `transform: rotate3d(0, 0.1, 1, ${idx * 360 / tt}deg);`;
                player.appendChild(lz);
        });
        audio.onplaying = audio.onpause = () => {
                pa.style.setProperty('--mode', audio.paused ? 'normal' : 'screen');
        };
        FS(pa, player);
</script>

花飞飞 发表于 2025-8-25 20:27

@马黑黑 跟了一个之前的小花播作业。{:4_173:}给白老师过过目

马黑黑 发表于 2025-8-25 20:55

完美

花飞飞 发表于 2025-8-25 20:56

马黑黑 发表于 2025-8-25 20:55
完美

{:4_173:}嗯哪，收到。。这个颜色搭上来刚刚好。。点小播动图可以隐身

马黑黑 发表于 2025-8-25 20:58

花飞飞 发表于 2025-8-25 20:56
嗯哪，收到。。这个颜色搭上来刚刚好。。点小播动图可以隐身

确实太漂亮了

红影 发表于 2025-8-25 21:01

那个小动图很漂亮，这次不是小播点缀文字，用小动图去点缀文字了，暂停是小动图会消失呢{:4_187:}

红影 发表于 2025-8-25 21:03

很浪漫唯美的制作，那一层层的海浪，犹如层层爱意涌来：爱你不止七夕，还有朝暮。
浪漫的七夕节，烂漫的制作{:4_199:}

小辣椒 发表于 2025-8-25 21:31

欣赏飞飞的精彩图图，这个播放器故意留出一个角，飞飞脑子灵光的{:4_199:}

偶然~ 发表于 2025-8-25 21:41

制作大气

偶然~ 发表于 2025-8-25 21:41

制作大气

偶然~ 发表于 2025-8-25 21:41

音画唯美\配乐好听

偶然~ 发表于 2025-8-25 21:41

感谢飞飞带来的精彩,辛苦了.

小九 发表于 2025-8-26 08:49

没想到粉色也是这么好看{:4_187:}

花飞飞 发表于 2025-8-26 12:08

马黑黑 发表于 2025-8-25 20:58
确实太漂亮了
颜色艳，蓝粉搭是经典色{:4_173:}
其实还试了莫兰迪色，调了一下的，结果灰扑扑的不透亮，技术不过关。。
只压了一些

马黑黑 发表于 2025-8-26 12:11

花飞飞 发表于 2025-8-26 12:08
颜色艳，蓝粉搭是经典色
其实还试了莫兰迪色，调了一下的，结果灰扑扑的不透亮，技术不过关。 ...

慢慢探索

花飞飞 发表于 2025-8-26 12:27

马黑黑 发表于 2025-8-26 12:11
慢慢探索

也没办法快，急也没用的事

马黑黑 发表于 2025-8-26 12:31

花飞飞 发表于 2025-8-26 12:27
也没办法快，急也没用的事

所以不用太急

花飞飞 发表于 2025-8-26 19:03

马黑黑 发表于 2025-8-26 12:31
所以不用太急

太急没用，皇帝又不急{:4_173:}

马黑黑 发表于 2025-8-26 19:50

花飞飞 发表于 2025-8-26 19:03
太急没用，皇帝又不急

现在有没有太监

花飞飞 发表于 2025-8-26 23:46

马黑黑 发表于 2025-8-26 19:50
现在有没有太监
封建糟粕，不能有了
页: [1] 2 3
查看完整版本: 【黑师代码】将故事写成我们（学习黑师20050727《Purple Magic》花形小播效果）