论坛 › 欢乐水吧 › 黑客帝国

马黑黑 发表于 2022-8-14 07:51

黑客帝国

<style>
        #papa { left: -214px; width: 1024px; height: 640px; background: black url('/data/attachment/forum/202208/14/074919yeeelef1ee9yj1en.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=1809135506.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 07:51

参考代码（全）
<style>
        #papa { left: -214px; width: 1024px; height: 640px; background: black url('/data/attachment/forum/202208/14/074919yeeelef1ee9yj1en.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=1809135506.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 08:41

好漂亮的制作。还是用画布制作的。{:4_199:}

马黑黑 发表于 2022-8-14 09:47

本帖最后由 马黑黑 于 2022-8-14 10:19 编辑

加林森 发表于 2022-8-14 08:41
好漂亮的制作。还是用画布制作的。
画布才能整出这么丰厚的效果，耗用CPU资源也相对使用众多HTML元素实现节省太多，缺点是制作这类帖子必须熟悉JavaScript

加林森 发表于 2022-8-14 09:53

马黑黑 发表于 2022-8-14 09:47
画布才能整出这么丰厚的效果，好用CPU资源也相对使用众多HTML元素实现节省太多，缺点是制作这类帖子必须 ...

嗯嗯。我还不熟悉的。

梦油 发表于 2022-8-14 10:15

黑黑朋友出奇制胜的制作太美了，图新乐美、妙手丹青、洋洋盈耳。

红影 发表于 2022-8-14 10:23

没看出来，那些下落的符号和字母是怎么来的？

红影 发表于 2022-8-14 10:27

好奇特的制作{:4_199:}

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

神马稀奇古怪的东东总能以一码了之，这介有点骇人哈{:4_174:}

小辣椒 发表于 2022-8-14 10:56

这个效果果然属黑客的，黑黑厉害{:4_178:}

小辣椒 发表于 2022-8-14 11:01

黑黑你画面上流动的字符是规定的吗？有隐藏代码？

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

小辣椒 发表于 2022-8-14 11:01
黑黑你画面上流动的字符是规定的吗？有隐藏代码？

去看我地儿上的解释

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

梦油 发表于 2022-8-14 10:15
黑黑朋友出奇制胜的制作太美了，图新乐美、妙手丹青、洋洋盈耳。

感谢支持
{:4_180:}

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

红影 发表于 2022-8-14 10:23
没看出来，那些下落的符号和字母是怎么来的？

看我在地儿上今天的帖子

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

小辣椒 发表于 2022-8-14 10:56
这个效果果然属黑客的，黑黑厉害

我不是黑客{:4_196:}

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

樵歌 发表于 2022-8-14 10:46
神马稀奇古怪的东东总能以一码了之，这介有点骇人哈

喝杯热茶消消暑{:4_190:}

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

红影 发表于 2022-8-14 10:27
好奇特的制作

不奇特的，一切有依有据

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

马黑黑 发表于 2022-8-14 11:06
去看我地儿上的解释

看见了，编程高手{:4_178:}

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

小辣椒 发表于 2022-8-14 11:17
看见了，编程高手

果酱

红影 发表于 2022-8-14 12:06

马黑黑 发表于 2022-8-14 11:07
看我在地儿上今天的帖子

嗯嗯，看过了，这个好难啊。

查看完整版本: 黑客帝国