Matriz

1175 Metehan

Abrir en el editor Publica tu código

Recomendado

13 December 2025

Plantilla HTML para sitio web de portafolio holográfico

17 May 2024

Aplicación del tiempo

23 August 2025

Portafolio de diseñador creativo - Alex

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

Plantilla HTML para sitio web de portafolio holográfico

Aplicación del tiempo

Portafolio de diseñador creativo - Alex

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS