南无月 发表于 2024-5-18 22:32

【黑师代码】人世间(学习黑师20240518《泽典 - 宿命》画布小播加歌词效果)


<style>
        #mydiv { margin: 130px 0 20px calc(50% - 931px); display: grid; place-items: center; width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240512fx02.webp') no-repeat center/cover; overflow: hidden; border: 1px solid gray; position: relative; }
        #player { position: absolute; bottom: 60px; }
        #lrc { position: absolute; bottom: 20px;opacity: .5;}
        .vid{position: absolute; bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; mix-blend-mode: screen; opacity: .3;}
        li-zi { position: absolute; width: 20px; height: 20px; border-radius: 0 50%; background: url('https://642303.freep.cn/642303/tu/c88747f820d857d2_133600001812182500.png') no-repeat center/cover; opacity: .6;}
        @keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: .6; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1915875397" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" loop muted></video>
        <canvas id="player" width="400" height="90"></canvas>
        <canvas id="lrc" width="800" height="30"></canvas>
</div>

<script>
        var sF = document.createElement('script');
        sF.charset = 'utf-8';
        sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
        document.body.appendChild(sF);
        var all = 360;
        for(var i = 0; i < all; i++) {
                var lz = document.createElement('li-zi');
                var hudu = Math.PI / 180 * 360 / all * i;
                var xx = 1000 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
                var size = Math.random() * 10 + 5;
                lz.style.cssText += `
                        --x0: ${xx}px;
                        --y0: ${yy}px;
                        width: ${size}px;
                        height: ${size}px;
                        animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
                `;
                mydiv.prepend(lz);
        }
        var colors = {track: 'SaddleBrown', prog: 'snow', lrc1: 'snow', lrc2: 'SaddleBrown'};
        var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
</script>

<br><br><br><br><br><br><br><br><br><br>

南无月 发表于 2024-5-18 22:33

@马黑黑 给白老师交一份今天的作业{:4_170:}

南无月 发表于 2024-5-18 22:34

整套照抄,粒子换成了雪花。别的没动。。{:4_187:}

马黑黑 发表于 2024-5-18 22:44

南无月 发表于 2024-5-18 22:33
@马黑黑 给白老师交一份今天的作业

{:4_199:}

马黑黑 发表于 2024-5-18 22:45

很赞的作品

红影 发表于 2024-5-18 23:47

把粒子变成了雪花,月儿厉害,这样的粒子更漂亮了{:4_199:}

红影 发表于 2024-5-19 00:00

歌曲非常好听,听了好几遍。帖子的氛围也特别好。飘飞的视频效果也特别好。很感人的帖子{:4_199:}

红影 发表于 2024-5-19 08:13

这视频选的,好像后面朦胧的灯光活了似的,很让人惊叹{:4_199:}

南无月 发表于 2024-5-19 17:24

马黑黑 发表于 2024-5-18 22:44


{:4_205:}我可以乐一下不

南无月 发表于 2024-5-19 17:24

马黑黑 发表于 2024-5-18 22:45
很赞的作品

这个更概括了{:4_170:}

马黑黑 发表于 2024-5-19 17:25

南无月 发表于 2024-5-19 17:24
这个更概括了

{:4_181:}

马黑黑 发表于 2024-5-19 17:25

南无月 发表于 2024-5-19 17:24
我可以乐一下不

那当然可以

南无月 发表于 2024-5-19 17:40

马黑黑 发表于 2024-5-19 17:25


{:4_189:}你都是对的

南无月 发表于 2024-5-19 17:40

马黑黑 发表于 2024-5-19 17:25
那当然可以

昨天乐到今天了,不乐都不行

南无月 发表于 2024-5-19 17:51

红影 发表于 2024-5-18 23:47
把粒子变成了雪花,月儿厉害,这样的粒子更漂亮了

代码支持换图片,很是惊喜{:4_187:}

红影 发表于 2024-5-19 18:50

南无月 发表于 2024-5-19 17:51
代码支持换图片,很是惊喜

月儿想到去换图片,这点很厉害呢{:4_187:}

马黑黑 发表于 2024-5-19 19:47

南无月 发表于 2024-5-19 17:40
昨天乐到今天了,不乐都不行

应该乐乐

南无月 发表于 2024-5-19 19:50

马黑黑 发表于 2024-5-19 19:47
应该乐乐

同乐呗{:4_170:}

南无月 发表于 2024-5-19 20:00

红影 发表于 2024-5-19 18:50
月儿想到去换图片,这点很厉害呢

图片如果换不上,只能把粒子整成雪粒了{:4_170:}

南无月 发表于 2024-5-19 20:00

红影 发表于 2024-5-19 00:00
歌曲非常好听,听了好几遍。帖子的氛围也特别好。飘飞的视频效果也特别好。很感人的帖子

歌曲是人世间的主题曲,很感人的一部电视剧
页: [1] 2 3
查看完整版本: 【黑师代码】人世间(学习黑师20240518《泽典 - 宿命》画布小播加歌词效果)