<!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://www.chinesehongker.com/honker.huc/music.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>
|
使用道具 举报
使用道具 举报