代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Nexus | Hacker Portal</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
body {
background: #000;
color: #0f0;
overflow: hidden;
height: 100vh;
position: relative;
}
#matrix-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.25;
}
#particle-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.container {
position: relative;
z-index: 1;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
}
.terminal-card {
background: rgba(0, 0, 0, 0.85);
border: 2px solid #0f0;
border-radius: 8px;
padding: 30px;
width: 100%;
max-width: 700px;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
backdrop-filter: blur(5px);
}
.terminal-card h1 {
font-size: 2.5rem;
margin-bottom: 20px;
text-shadow: 0 0 10px #0f0;
letter-spacing: 2px;
overflow: hidden;
border-right: 2px solid #0f0;
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
.terminal-card p {
font-size: 1.1rem;
margin-bottom: 30px;
line-height: 1.6;
opacity: 0;
animation: fadeIn 1s ease forwards 3.5s;
}
.command-line {
color: #0ff;
margin: 10px 0;
text-align: left;
opacity: 0;
animation: fadeIn 1s ease forwards 4.5s;
}
.command-line::before {
content: "$ ";
color: #0f0;
}
.terminal-logs {
max-height: 100px;
overflow-y: auto;
margin: 15px 0;
border-top: 1px solid #0f03;
padding-top: 10px;
opacity: 0;
animation: fadeIn 1s ease forwards 4.5s;
}
.terminal-logs::-webkit-scrollbar {
width: 4px;
}
.terminal-logs::-webkit-scrollbar-thumb {
background: #0f0;
}
.enter-btn {
background: transparent;
border: 2px solid #0f0;
color: #0f0;
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
opacity: 0;
animation: fadeIn 1s ease forwards 5.5s;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}
.enter-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 255, 0, 0.2) 0%, transparent 70%);
transform: scale(0);
transition: transform 0.6s ease;
border-radius: 50%;
}
.enter-btn:hover {
background: #0f01;
color: #0f0;
box-shadow: 0 0 15px rgba(0, 255, 0, 0.6), 0 0 30px rgba(0, 255, 0, 0.4), 0 0 45px rgba(0, 255, 0, 0.2);
transform: translateY(-2px);
text-shadow: 0 0 5px #0f0;
}
.enter-btn:hover::before {
transform: scale(1);
}
.enter-btn:active {
animation: btnShake 0.3s ease, btnScale 0.2s ease;
box-shadow: 0 0 25px rgba(0, 255, 0, 0.8), 0 0 50px rgba(0, 255, 0, 0.5);
}
.enter-btn:disabled {
cursor: wait;
border-color: #0f08;
color: #0f08;
box-shadow: none;
transform: translateY(0);
}
.enter-btn:disabled::before {
display: none;
}
footer {
position: absolute;
bottom: 20px;
font-size: 0.8rem;
color: #0f0;
opacity: 0.5;
z-index: 1;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #0f0 }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px) }
to { opacity: 1; transform: translateY(0) }
}
@keyframes btnShake {
0% { transform: translateX(0); }
25% { transform: translateX(-3px) rotate(-1deg); }
50% { transform: translateX(3px) rotate(1deg); }
75% { transform: translateX(-2px) rotate(-0.5deg); }
100% { transform: translateX(0); }
}
@keyframes btnScale {
0% { transform: scale(1); }
50% { transform: scale(0.95); }
100% { transform: scale(1); }
}
@media (max-width: 768px) {
.terminal-card h1 {
font-size: 1.8rem;
}
.terminal-card {
padding: 20px;
}
}
@media (max-width: 480px) {
.terminal-card h1 {
font-size: 1.5rem;
}
.command-line {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<canvas id="matrix-bg"></canvas>
<canvas id="particle-canvas"></canvas>
<div class="container">
<div class="terminal-card">
<h1>黑暗枢纽访问门户</h1>
<p>未经授权的访问会被监控和追踪。所有作都会被记录.</p>
<div class="command-line">扫描系统完整性...</div>
<div class="command-line">核实资质...</div>
<div class="command-line">访问权限：管理员 ✔️</div>
<div class="terminal-logs" id="terminal-logs"></div>
<button class="enter-btn">登录</button>
</div>
</div>
<footer>
© 2025 黑暗纽带 |加密连接
</footer>
<audio id="click-sound" preload="auto">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3" type="audio/mpeg">
</audio>
<audio id="connect-sound" preload="auto">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-sci-fi-interface-click-221.mp3" type="audio/mpeg">
</audio>
<script>
const canvas = document.getElementById('matrix-bg');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポ';
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = [];
for (let i = 0; i < columns; i++) {
drops[i] = Math.random() * -100;
}
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 Courier`;
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]++;
}
}
setInterval(drawMatrix, 35);
const particleCanvas = document.getElementById('particle-canvas');
const particleCtx = particleCanvas.getContext('2d');
let particles = [];
function resizeParticleCanvas() {
particleCanvas.width = window.innerWidth;
particleCanvas.height = window.innerHeight;
}
resizeParticleCanvas();
window.addEventListener('resize', resizeParticleCanvas);
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 6 - 3;
this.speedY = Math.random() * 6 - 3;
this.color = '#0f0';
this.alpha = 1;
this.decay = Math.random() * 0.01 + 0.005;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= this.decay;
}
draw() {
particleCtx.save();
particleCtx.globalAlpha = this.alpha;
particleCtx.fillStyle = this.color;
particleCtx.beginPath();
particleCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
particleCtx.fill();
particleCtx.restore();
}
}
function createParticles(x, y) {
particles = [];
for (let i = 0; i < 50; i++) {
particles.push(new Particle(x, y));
}
function animateParticles() {
particleCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
particleCtx.fillRect(0, 0, particleCanvas.width, particleCanvas.height);
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.update();
p.draw();
if (p.alpha <= 0) {
particles.splice(i, 1);
}
}
if (particles.length > 0) {
requestAnimationFrame(animateParticles);
}
}
animateParticles();
}
function addTerminalLog(text, color = '#0ff') {
const logsContainer = document.getElementById('terminal-logs');
const logLine = document.createElement('div');
logLine.className = 'command-line';
logLine.style.color = color;
logLine.innerHTML = `$ ${text}`;
logsContainer.appendChild(logLine);
logsContainer.scrollTop = logsContainer.scrollHeight;
}
function playSound(id) {
const sound = document.getElementById(id);
sound.currentTime = 0;
sound.play().catch(err => console.log('音效播放失败:', err));
}
const enterBtn = document.querySelector('.enter-btn');
enterBtn.addEventListener('click', (e) => {
const btnX = e.clientX;
const btnY = e.clientY;
createParticles(btnX, btnY);
playSound('click-sound');
enterBtn.textContent = 'CONNECTING...';
enterBtn.disabled = true;
setTimeout(() => {
addTerminalLog('initiating secure tunnel...', '#0f0');
playSound('connect-sound');
}, 300);
setTimeout(() => {
addTerminalLog('handshake with server [192.168.1.101] successful', '#0f0');
}, 800);
setTimeout(() => {
addTerminalLog('encrypting connection with AES-256...', '#0ff');
}, 1300);
setTimeout(() => {
addTerminalLog('access granted - redirecting to control panel', '#0f0');
window.location.href = 'https://www.125o.com/';
}, 2000);
});
</script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容