Matriz

1311 Metehan

Abrir en el editor Video Publica tu código

Recomendado

28 October 2024

Diseño de tarjeta de perfil

20 August 2025

Plantilla HTML para blog de diseño moderno

26 May 2025

Un código de Metehan

HTML

CSS

body, html {

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

font-family: 'Courier New', monospace;

}

#matrix-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.login-container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

z-index: 1;

}

h1 {

color: #00FF00;

text-shadow: 0 0 10px #00FF00;

margin-bottom: 20px;

}

.input-field {

margin: 20px 0;

}

input {

background: rgba(0, 0, 0, 0.5);

border: none;

border-bottom: 2px solid #00FF00;

color: #00FF00;

font-size: 16px;

padding: 10px;

width: 250px;

outline: none;

transition: border-color 0.3s;

}

input:focus {

border-color: #008000;

}

input::placeholder {

color: rgba(0, 255, 0, 0.5);

}

button {

background: none;

border: 2px solid #00FF00;

color: #00FF00;

padding: 10px 20px;

cursor: pointer;

font-size: 16px;

transition: all 0.3s ease;

}

button:hover {

background: #00FF00;

color: black;

}

JS

const canvas = document.getElementById('matrix-canvas');

const ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-={}[]|\\:;"\'<>,.?/';

const fontSize = 16;

const columns = canvas.width / fontSize;

const drops = [];

for (let i = 0; i < columns; i++) {

drops[i] = 1;

}

function draw() {

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 = matrixChars[Math.floor(Math.random() * matrixChars.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(draw, 33);

document.getElementById('loginForm').addEventListener('submit', function(event) {

event.preventDefault();

alert('Giriş yapıldı!');

});

Recomendado

Diseño de tarjeta de perfil

Plantilla HTML para blog de diseño moderno

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS