论坛 › 欢乐水吧 › 《黑客之音》（学习老黑“黑客帝国”制作）

加林森 发表于 2022-8-14 14:58

《黑客之音》（学习老黑“黑客帝国”制作）

<style>
        #papa { left: -214px; width: 1024px; height: 640px; background: black url('https://pic.imgdb.cn/item/62f882d716f2c2beb1771411.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
        #canv { position: absolute; opacity: .75; }
        #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
        #lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: #859670; text-shadow: 2px 2px 4px #222; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <span id="lrcbox">黑客之音</span>
        <canvas id="canv" width="1024" height="640"></canvas>
        <span id="disc"></span>
</div>

<script type="text/javascript">

let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let texts = Array.from(Array(94), (x,k) => String.fromCharCode(33+k)),
        fontsize = 16,
        columns = Math.floor(w / fontsize) - 1,
        drops = new Array(columns),
        aud = new Audio();
       
aud.src = 'https://music.163.com/song/media/outer/url?id=34167131.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

(function draw(){
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, w, h);
        ctx.fillStyle = '#0f0';
        ctx.font = fontsize + 'px arial';
       for(var j = 0; j < drops.length; j ++){
                let text = texts;
                ctx.fillText(text, j * fontsize + fontsize / 2 + 1, drops * fontsize);
                if(drops*fontsize > h || Math.random() > 0.95){
                        drops = 0;
                }
                drops++;
        }
        requestAnimationFrame(draw);
})();

</script>

加林森 发表于 2022-8-14 14:58

@马黑黑

樵歌 发表于 2022-8-14 16:46

你这音乐加上更骇银{:4_173:}

加林森 发表于 2022-8-14 16:47

樵歌 发表于 2022-8-14 16:46
你这音乐加上更骇银

这就怕啦？{:5_117:}

小辣椒 发表于 2022-8-14 17:08

队长真快，一下子出来了{:4_178:}

马黑黑 发表于 2022-8-14 17:26

队长手快。赞个。

加林森 发表于 2022-8-14 17:52

小辣椒 发表于 2022-8-14 17:08
队长真快，一下子出来了

我去仔细看了老黑的教程才跟到制作的。

小辣椒 发表于 2022-8-14 17:53

加林森 发表于 2022-8-14 17:52
我去仔细看了老黑的教程才跟到制作的。

自己制作的？不是套用啊，队长厉害

小辣椒 发表于 2022-8-14 17:54

我感觉只能套用，我自己做不出这些字码

加林森 发表于 2022-8-14 17:58

马黑黑 发表于 2022-8-14 17:26
队长手快。赞个。

看了你写的教程在理解后制作的。

马黑黑 发表于 2022-8-14 18:11

加林森 发表于 2022-8-14 17:58
看了你写的教程在理解后制作的。

非常不错

加林森 发表于 2022-8-14 18:32

小辣椒 发表于 2022-8-14 17:53
自己制作的？不是套用啊，队长厉害

是啊。

加林森 发表于 2022-8-14 18:33

马黑黑 发表于 2022-8-14 18:11
非常不错

谢谢你啦！

小辣椒 发表于 2022-8-14 19:26

加林森 发表于 2022-8-14 18:32
是啊。

那我不行，我只能套用

红影 发表于 2022-8-14 19:29

队长真快，这么快就做出来了。{:4_187:}

加林森 发表于 2022-8-14 20:38

小辣椒 发表于 2022-8-14 19:26
那我不行，我只能套用

就是看懂字符串的代码，这个是关键。

加林森 发表于 2022-8-14 20:41

红影 发表于 2022-8-14 19:29
队长真快，这么快就做出来了。

是啊。红影也去制作一个玩吧 。

红影 发表于 2022-8-15 21:03

加林森 发表于 2022-8-14 20:41
是啊。红影也去制作一个玩吧 。

嗯，我也做了一个，歌颂黑黑的，《天降奇才》{:4_173:}

加林森 发表于 2022-8-15 21:26

红影 发表于 2022-8-15 21:03
嗯，我也做了一个，歌颂黑黑的，《天降奇才》

看见了 。我的电脑太卡了。回帖真不

查看完整版本: 《黑客之音》（学习老黑“黑客帝国”制作）