梦江南 发表于 2025-9-8 19:19

两只猫和Anger（学习黑黑老师的Anger代码）


<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://img2.oldkids.cn/upload/2025/09/08/blog_260798238_20250908191257752.jpg') no-repeat center/cover; --ma-size: 10%; }
#ma {left: 42%; bottom: 26px; background: no-repeat center/cover; }
        #btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }
        #prog { position: absolute;left: 42%; bottom: 26px; right: 10px; bottom: 10px; width: var(--ma-size); cursor: pointer; filter: hue-rotate(80deg) opacity(.6); }

        #ma { right: 10px; bottom: 40px; border-radius: 50%; }
        .vid { mixed-blend-mode: screen; opacity: 1; }
        #msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
        @keyframes move { to { stroke-dashoffset: 0; } }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2105311084" autoplay loop></audio>
        <video class="vid pd-vid" src="https://img4.oldkids.cn/upload/2025/09/08/blog_260798238_20250908190033247.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma" class="opacity">
                <svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
        </div>
</div>

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

        var dr = Dr.dr(msvg);
        dr.circle(0, 0, 80, 'none', '#fff', 20).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
        dr.line(3, 0, 70, 0, '#eee', 20).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});

        aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
        prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;

        FS(pa, ma);
</script>

杨帆 发表于 2025-9-8 20:00

制图漂亮，效果惊艳，谢谢江南精彩分享{:4_204:}

梦油 发表于 2025-9-8 20:02

两只猫的眼神做得真好。

红影 发表于 2025-9-8 22:09

有趣，这两只猫跟两只小老虎似的，非常灵动。
制作漂亮，欣赏江南好帖{:4_199:}

梦江南 发表于 2025-9-9 09:48

杨帆 发表于 2025-9-8 20:00
制图漂亮，效果惊艳，谢谢江南精彩分享

问好杨帆，谢谢欣赏高评。{:4_204:}

梦江南 发表于 2025-9-9 09:49

梦油 发表于 2025-9-8 20:02
两只猫的眼神做得真好。

谢谢梦油欣赏，问好。{:4_204:}

梦江南 发表于 2025-9-9 09:51

红影 发表于 2025-9-8 22:09
有趣，这两只猫跟两只小老虎似的，非常灵动。
制作漂亮，欣赏江南好帖

谢谢影子欣赏，问好。{:4_204:}

红影 发表于 2025-9-9 22:22

梦江南 发表于 2025-9-9 09:51
谢谢影子欣赏，问好。

不客气，再赏江南好帖{:4_187:}

梦江南 发表于 2025-9-10 09:54

红影 发表于 2025-9-9 22:22
不客气，再赏江南好帖

再谢影子欣赏支持。问好！{:4_204:}

红影 发表于 2025-9-10 20:40

梦江南 发表于 2025-9-10 09:54
再谢影子欣赏支持。问好！

问好江南，晚上好{:4_187:}

梦江南 发表于 2025-9-11 08:09

红影 发表于 2025-9-10 20:40
问好江南，晚上好

早上好，新的一天快乐！

小辣椒 发表于 2025-9-11 13:41

阿姨这个图我没有看过的，今天好好欣赏一下{:4_205:}

小辣椒 发表于 2025-9-11 13:42

二只猫咪对着看播放器，哈哈，好玩{:4_199:}

梦江南 发表于 2025-9-11 15:13

小辣椒 发表于 2025-9-11 13:41
阿姨这个图我没有看过的，今天好好欣赏一下

嗯，上来了刚好看看。{:4_173:}

梦江南 发表于 2025-9-11 15:15

小辣椒 发表于 2025-9-11 13:42
二只猫咪对着看播放器，哈哈，好玩

阿姨不会做PS，就用AI来做着玩了。{:4_185:}

红影 发表于 2025-9-11 18:35

梦江南 发表于 2025-9-11 08:09
早上好，新的一天快乐！

每一天都快乐{:4_173:}

梦江南 发表于 2025-9-12 07:51

红影 发表于 2025-9-11 18:35
每一天都快乐

周末快乐！

红影 发表于 2025-9-12 22:32

梦江南 发表于 2025-9-12 07:51
周末快乐！

{:4_187:}

小辣椒 发表于 2025-9-16 15:42

梦江南 发表于 2025-9-11 15:15
阿姨不会做PS，就用AI来做着玩了。

挺好的，现在的新技术阿姨掌握的太好了，小辣椒都不会的

梦江南 发表于 2025-9-16 16:23

小辣椒 发表于 2025-9-16 15:42
挺好的，现在的新技术阿姨掌握的太好了，小辣椒都不会的

你就不用学了，PS做出来要好多了。
页: [1]
查看完整版本: 两只猫和Anger（学习黑黑老师的Anger代码）