梦江南 发表于 2025-8-16 19:13

卡通十二生肖 （学习黑黑老师星空夜舞代码）

本帖最后由 梦江南 于 2025-8-16 19:10 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://img2.oldkids.cn/upload/2025/08/16/blog_260798238_20250816140138256.jpg') no-repeat center/cover; --bg1: url('https://img1.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141412650.jpg') no-repeat center/cover; --ma-size: 15%; --per: -0.5%; }
        #pa::before { position: absolute; content: ''; inset: 0; background: var(--bg1); mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); --webkit-mask: radial-gradient(red var(--per), transparent calc(var(--per) + 0.5%) 0); }
        #ma { left: 30px; top: 30px; background: conic-gradient(yellow 25%, Lime 0 50%) center/8% 8%; mask: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; -webkit-mask: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
        #btnFs { left: 20px; bottom: 20px; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=422427074" autoplay loop></audio>
        <video class="qk-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d5d02c69b1.mp4" autoplay loop muted></video>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/59/07/video63650c9bd14ce.mp4" autoplay loop muted></video>
        <div id="ma" class="brightness"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);

        var per = 0, step = 0.5, picIdx = 0, raf;
        var pics = [
                'https://img2.oldkids.cn/upload/2025/08/16/blog_260798238_20250816140138256.jpg',
                'https://img1.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141412650.jpg',
                'https://img4.oldkids.cn/upload/2025/08/16/blog_260798238_20250816140138904.jpg',
                'https://img4.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141514215.jpg',
                'https://img2.oldkids.cn/upload/2025/08/16/blog_260798238_20250816140138520.jpg',
                'https://img2.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141608140.jpg',
                'https://img2.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141751966.jpg',
                'https://img1.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141853706.jpg',
                'https://img4.oldkids.cn/upload/2025/08/16/blog_260798238_20250816140138950.jpg',
                'https://img4.oldkids.cn/upload/2025/08/16/blog_260798238_20250816141944954.jpg',
                'https://img3.oldkids.cn/upload/2025/08/16/blog_260798238_20250816140138165.jpg',
                'https://img4.oldkids.cn/upload/2025/08/16/blog_260798238_20250816142018462.jpg'
        ];

        ma.onanimationiteration = () => update();

        function update() {
                if (document.visibilityState === 'hidden') return;
                let idx = (per <= 0 ? picIdx : picIdx + 1) % pics.length,
                        idx1 = (per <= 0 ? picIdx + 1 : picIdx) % pics.length;
                pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
                pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
                picIdx ++;
                animate();
        }

        function animate() {
                per += step;
                if (per < -0.5 || per > 100) {
                        cancelAnimationFrame(raf);
                        step = -step;
                } else {
                        pa.style.setProperty('--per', per + '%');
                        raf = requestAnimationFrame(animate);
                }
        }
</script>

梦江南 发表于 2025-8-16 19:15

黑黑老师，这十二生肖怎么不会按顺序出来，这是怎么回事？

红影 发表于 2025-8-16 19:39

这个好，十二生肖依次出现，这个做图片轮播特别适合呢{:4_187:}

红影 发表于 2025-8-16 19:41

梦江南 发表于 2025-8-16 19:15
黑黑老师，这十二生肖怎么不会按顺序出来，这是怎么回事？

是按顺序出来的啊，江南的第一个视频使用的class不能用qk-vid，因为这个是熊猫，要用pd那个选项{:4_187:}

杨帆 发表于 2025-8-16 21:19

十二生肖集中展示，谢谢江南精彩分享{:4_204:}

梦油 发表于 2025-8-16 21:24

我还保存着第一套十二生肖邮票呢。

梦江南 发表于 2025-8-17 07:47

红影 发表于 2025-8-16 19:39
这个好，十二生肖依次出现，这个做图片轮播特别适合呢

早上问好影子，谢谢首席欣赏。{:4_171:}

梦江南 发表于 2025-8-17 07:55

红影 发表于 2025-8-16 19:41
是按顺序出来的啊，江南的第一个视频使用的class不能用qk-vid，因为这个是熊猫，要用pd那个选项

影子，我用的是2345浏览器，看不到图片轮换。听你一说，我再到123浏览器去看，看到了图片轮换。放心了。

这个视频找不到588的，只好用熊猫了。

梦江南 发表于 2025-8-17 07:56

杨帆 发表于 2025-8-16 21:19
十二生肖集中展示，谢谢江南精彩分享

早上问好杨帆，谢谢欣赏。{:4_171:}

梦江南 发表于 2025-8-17 07:57

梦油 发表于 2025-8-16 21:24
我还保存着第一套十二生肖邮票呢。

早上问好梦油，你的这套十二生肖邮票价值连城了。

梦油 发表于 2025-8-17 09:54

梦江南 发表于 2025-8-17 07:57
早上问好梦油，你的这套十二生肖邮票价值连城了。

是的。是很珍贵的。

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

梦江南 发表于 2025-8-17 07:47
早上问好影子，谢谢首席欣赏。

不客气啊，问好江南{:4_187:}

红影 发表于 2025-8-17 14:12

梦江南 发表于 2025-8-17 07:55
影子，我用的是2345浏览器，看不到图片轮换。听你一说，我再到123浏览器去看，看到了图片轮换。放心了。
...

熊猫和千库视频都能用，这个封装里都装好了，用哪个，就选择对应的css名啊。

梦江南 发表于 2025-8-17 14:31

红影 发表于 2025-8-17 14:11
不客气啊，问好江南

是互动快乐；互动增收。{:4_173:}

梦江南 发表于 2025-8-17 14:32

红影 发表于 2025-8-17 14:12
熊猫和千库视频都能用，这个封装里都装好了，用哪个，就选择对应的css名啊。

这样说来要把css给换了？

红影 发表于 2025-8-17 20:54

梦江南 发表于 2025-8-17 14:31
是互动快乐；互动增收。

嗯嗯，互动会带来很多新奇的感受。

红影 发表于 2025-8-17 20:58

梦江南 发表于 2025-8-17 14:32
这样说来要把css给换了？

不是啊，黑黑在https://638183.freep.cn/638183/web/css/tz01.css中已经封装好了两种视频。
如果使用千库的视频，在html中选择video class="qk-vid" src="。。。如果使用的熊猫，就选择video class="pd-vid" src="。。。，你看着两个的缩写是不一样的，你的帖子里熊猫的那个要用pd-vid
页: [1]
查看完整版本: 卡通十二生肖 （学习黑黑老师星空夜舞代码）