<!DOCTYPE html>
<html>
<head>
<title>Matrix</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
position: fixed;
top: 0;
left: 0;
}
#terminal {
position: fixed;
top: 20px;
left: 20px;
color: #0f0;
font-family: ‘Courier New’, monospace;
z-index: 100;
text-shadow: 0 0 5px #0f0;
}
</style>
</head>
<body>
<div id=”terminal”>> INITIALIZING SYSTEM…</div>
<canvas id=”matrix”></canvas>
<audio autoplay loop>
<source src=”https://assets.mixkit.co/active_storage/sfx/2573/2573-preview.mp3″ type=”audio/mpeg”>
您的浏览器不支持音频播放
</audio>
<script>
// 矩阵数字雨效果
const canvas = document.getElementById(‘matrix’);
const ctx = canvas.getContext(‘2d’);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const chars = ’01’;
const fontSize = 14;
const columns = canvas.width/fontSize;
const drops = [];
for(let x = 0; x < columns; x++) {
drops[x] = 1;
}
function drawMatrix() {
ctx.fillStyle = ‘rgba(0, 0, 0, 0.05)’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ‘#0F0’;
ctx.font = fontSize + ‘px monospace’;
for(let i = 0; i < drops.length; i++) {
const text = chars[Math.floor(Math.random()*chars.length)];
ctx.fillText(text, i*fontSize, drops[i]*fontSize);
if(drops[i]*fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
// 终端文字效果
const terminal = document.getElementById(‘terminal’);
const messages = [
“SYSTEM ACCESS GRANTED”,
“LOADING CORE MODULES…”,
“INITIALIZING NEURAL NETWORK…”,
“CONNECTING TO MAINFRAME…”,
“ACCESS LEVEL: ROOT”
];
let msgIndex = 0;
function typeWriter() {
if(msgIndex < messages.length) {
terminal.innerHTML += `<div>> ${messages[msgIndex]}</div>`;
msgIndex++;
setTimeout(typeWriter, 1500);
}
}
// 启动效果
setInterval(drawMatrix, 50);
setTimeout(typeWriter, 1000);
// 窗口调整时重置canvas
window.addEventListener(‘resize’, () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
本网站内容及资料来源于网络，并不代表本站观点和对其真实性负责，也不构成任何其他建议;部分内容是由网友自主投稿和发布、编辑整理上传，对此类内容本站仅提供交流平台，不为其版权负责;所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性;如果您发现网站上有侵犯您的知识产权的内容，请与我们取得联系，我们会及时修改或删除。文章版权归作者所有，原创作品未经允许请勿转载。投诉请联系：admin@chnhonker.com
暂无评论内容